html - 如何使用 css 网格生成带有元素列表的独特布局？

Question

基本上我得到了一个数组中的帖子列表，我正在尝试创建一个布局，它不仅仅是在 while 循环之外换行。每列都是不同的。

这是我想要得到的布局。

除了红色边框内的部分，我的所有东西都可以正常工作。

非常感谢任何帮助。

ul.posts {
  display: grid;
  padding-left: 0px;
  grid-template-rows: repeat(auto, 1fr);
  grid-template-columns: repeat(12, 1fr);
  justify-content: between;
  grid-gap: 10px;
}
ul.posts li {
  list-style-type: none;
}
ul.posts li:nth-child(1) {
  grid-area: "g1";
  grid-row: 1/2;
  grid-column: 1/13;
}
ul.posts li:nth-child(2) {
  grid-area: "g2";
  grid-row: 2/3;
  grid-column: 1/7;
}
ul.posts li:nth-child(3) {
  grid-area: "g3";
  grid-row: 2/3;
  grid-column: 7/13;
}
ul.posts li:nth-child(4) {
  grid-row: 3/4;
  grid-column: 1/5;
}
ul.posts li:nth-child(5) {
  grid-row: 3/4;
  grid-column: 5/9;
}
ul.posts li:nth-child(6) {
  grid-row: 3/4;
  grid-column: 9/13;
}
ul.posts li:nth-child(7) {
  grid-row: 4/5;
  display: flex;
}
ul.posts li:nth-child(7) div:nth-child(1) {
  background: red;
  flex: 1;
}
ul.posts li:nth-child(7) div:nth-child(1) img {
  width: 100% !important;
}
ul.posts li:nth-child(7) div:nth-child(2) {
  background: green;
  flex: 1;
}
ul.posts li:nth-child(8) {
  grid-row: 5/6;
}
ul.posts li:nth-child(9) {
  grid-row: 4/6;
  grid-column: 7/13;
}
ul.posts li:nth-child(9) img {
  height: 800px;
}
ul.posts li:nth-child(10) {
  grid-row: 6/7;
  grid-column: 1/13;
}
ul.posts li:nth-child(11) {
  grid-row: 7/8;
  grid-column: 1/13;
}
ul.posts img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  padding-bottom: 10px;
}

<ul class="posts">
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 1</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 2</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 3</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
              <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 4</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 5</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 6</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 7</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 8</h2>
              <p>Description</p>
            </div>
          </li>
            <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 9</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 10</h2>
              <p>Description</p>
            </div>
          </li>
          <li>
            <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
            <div class="description">
              <h2>Title 11</h2>
              <p>Description</p>
            </div>
          </li>
        </ul>

Answer 1

您缺少 grid-cloumn。检查片段。

ul.posts {
  display: grid;
  padding-left: 0px;
  grid-template-rows: repeat(auto, 1fr);
  grid-template-columns: repeat(12, 1fr);
  justify-content: between;
  grid-gap: 10px;
}

ul.posts li {
  list-style-type: none;
}

ul.posts li:nth-child(1) {
  grid-area: "g1";
  grid-row: 1/2;
  grid-column: 1/13;
}

ul.posts li:nth-child(2) {
  grid-area: "g2";
  grid-row: 2/3;
  grid-column: 1/7;
}

ul.posts li:nth-child(3) {
  grid-area: "g3";
  grid-row: 2/3;
  grid-column: 7/13;
}

ul.posts li:nth-child(4) {
  grid-row: 3/4;
  grid-column: 1/5;
}

ul.posts li:nth-child(5) {
  grid-row: 3/4;
  grid-column: 5/9;
}

ul.posts li:nth-child(6) {
  grid-row: 3/4;
  grid-column: 9/13;
}

ul.posts li:nth-child(7) {
  grid-row: 4/5;
  grid-column: 1/7;
}

ul.posts li:nth-child(7) div:nth-child(1) {
  background: red;
  flex: 1;
}

ul.posts li:nth-child(7) div:nth-child(1) img {
  width: 100% !important;
}

ul.posts li:nth-child(7) div:nth-child(2) {
  background: green;
  flex: 1;
}

ul.posts li:nth-child(8) {
  grid-row: 5/6;
  grid-column: 1/7;
}

ul.posts li:nth-child(9) {
  grid-row: 4/6;
  grid-column: 7/13;
  background: #000;
}

ul.posts li:nth-child(9) img {
  height: 800px;
}

ul.posts li:nth-child(10) {
  grid-row: 6/7;
  grid-column: 1/13;
}

ul.posts li:nth-child(11) {
  grid-row: 7/8;
  grid-column: 1/13;
}

ul.posts img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  padding-bottom: 10px;
}

<ul class="posts">
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 1</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 2</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 3</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 4</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 5</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 6</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 7</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 8</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 9</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 10</h2>
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="featured-image"><img src="https://via.placeholder.com/600x300"></div>
    <div class="description">
      <h2>Title 11</h2>
      <p>Description</p>
    </div>
  </li>
</ul>