Css Grid列的堆叠在彼此之上

时间：2017-09-24 17:07:34

标签： html css css-grid

我知道我的HTML和CSS有点过于扩展，但是当我把它组合起来时，它会有更糟糕的错误。我的代码下面是我需要的最后一个条，就像另一个一样。我试图改变该行的填充和边距以及完全重做我的网格。 

#grid {
  margin: auto;
  display: grid;
  grid-template-rows: auto;
  width: 100%;
}

#topbar {
  grid-template-columns: repeat(20, 1fr);
  background-color: white;
  grid-row: 1 / 2;
  display: grid;
}

#topbar #pad1 {
  grid-column: 1 / 3;
  background-color: #e0e0df;
}

#topbar #img {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #li {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #acre {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pdf {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

/* For each lan div id use #then div name to style */

#plot1 {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 2 / 3;
  display: grid;
}

#plot1 #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#plot1 #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#plot1 #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#plot1 #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

#last {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 3 / 4;
  display: grid;
}

#last #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#last #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#last #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#last #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}
<div id="grid">
          <div id="topbar">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div>
          </div>
          <!--For each piece of land add a div with its name then set grid potition in css sheet.-->
          <div id="plot1">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div
          </div>
          <div id="last">
            <div id="pad1">

            </div>
            <div id="img">
              <p>hello</p>  
            </div>
            <div id="li">

            </div>
            <div id="acre">

            </div>
            <div id="pdf">

            </div>
            <div id="pad2">

            </div>
          </div>
        </div>
        <div id="foot">
          <p>Copyright &copy; 2017 Greater Texas Land Resources LP &amp;<a href="mailto:coding.matthew.horton@gmail.com"> Design</a></p>
        </div>
      </div>

最后一行搞砸了我试图复制它之前的行，所以它创建了一个可以保存信息的图表类型的东西

2 个答案:

答案 0 :(得分：2)

您未正确关闭div代码。（#pad2未正确关闭） 

     <div id="pad2">
        </div
      </div>
      <div id="last">
        <div id="pad1">

旁边，id 只能使用一次，当您需要多次应用相同的样式时，请使用class。

＆＃13;
＆＃13; 
#grid {
  margin: auto;
  display: grid;
  grid-template-rows: auto;
  width: 100%;
}

#topbar {
  grid-template-columns: repeat(20, 1fr);
  background-color: white;
  grid-row: 1 / 2;
  display: grid;
}

#topbar #pad1 {
  grid-column: 1 / 3;
  background-color: #e0e0df;
}

#topbar #img {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #li {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #acre {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pdf {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

/* For each lan div id use #then div name to style */

#plot1 {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 2 / 3;
  display: grid;
}

#plot1 #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#plot1 #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#plot1 #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#plot1 #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

#last {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 3 / 4;
  display: grid;
}

#last #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#last #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#last #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#last #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}
＆＃13; 
<div id="grid">
          <div id="topbar">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div>
          </div>
          <!--For each piece of land add a div with its name then set grid potition in css sheet.-->
          <div id="plot1">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div><!--- here was the syntax typo -->
          </div>
          <div id="last">
            <div id="pad1">

            </div>
            <div id="img">
              <p>hello</p>  
            </div>
            <div id="li">

            </div>
            <div id="acre">

            </div>
            <div id="pdf">

            </div>
            <div id="pad2">

            </div>
          </div>
        </div>
        <div id="foot">
          <p>Copyright &copy; 2017 Greater Texas Land Resources LP &amp;<a href="mailto:coding.matthew.horton@gmail.com"> Design</a></p>
        </div>
      </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

对于任何经过仔细检查的人都没有html错误，由于grid-area的存在，可能会导致堆叠。分配grid-area会将元素锁定到grid-template-areas为其定义的第一个单元格。

以下原因导致堆积：

.grid {
  display: grid;
  grid-gap: .5em;
  grid-template-columns: auto auto;
  grid-template-areas: "left right";
}

.left {
  grid-area: left;
  border: 2px solid skyblue;
}

.right {
  grid-area: right;
  border: 2px solid seagreen;
}
<div class="grid">
  <div class="left">1,1</div>
  <div class="right">1,2</div>
  <div class="left">2,1</div>
  <div class="right">2,2</div>
  <div class="left">3,1</div>
  <div class="right">3,2</div>
</div>

没有分配grid-area的同一示例解决了该问题：

.grid {
  display: grid;
  grid-gap: .5em;
  grid-template-columns: auto auto;
  /* This should also be taken out since it serves no purpose anymore.
     Leaving it here to show the container property has no bearing on repeats by itself.
     Only when the contents use the assignments */
  grid-template-areas: "left right";
}

.left {
  /*grid-area: left;*/
  border: 2px solid skyblue;
}

.right {
  /*grid-area: right;*/
  border: 2px solid seagreen;
}
<div class="grid">
  <div class="left">1,1</div>
  <div class="right">1,2</div>
  <div class="left">2,1</div>
  <div class="right">2,2</div>
  <div class="left">3,1</div>
  <div class="right">3,2</div>
</div>

对于这样一个简单的布局，我完全不需要在其他帖子中使用的容器的所有各种网格行设置：

  • grid-auto-rows: auto;
  • grid-template-rows: repeat(auto);
  • grid-auto-flow: column;

display: grid自动默认为重复行，除非您特别定义grid-template-areas并分配grid-area以便将内容锁定到位。

相关问题
最新问题