在CSS网格中开始新行

js5cn81o 于 2023-07-01 发布在其他

关注(0)|答案(3)|浏览(167)

我试图生成一个特定的布局使用CSS网格。我想要的布局是这样的：

整个页面分为12列。第一行单元格跨越整个第一行，第二行具有2个单元格，每个单元格跨越4列。第三行有3个单元格，每个单元格跨越3列。但根据我的代码，第三行的3个单元格从第二行本身开始。
我的代码：

* {
  border: 1px solid;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

.item {
  padding: 24px;
}

.banner-img {
  grid-column: span 12;
}

.card {
  grid-column: span 4;
}

.note {
  grid-column: span 3;
}

<div class="wrapper">
  <div class="item banner-img">Hello</div>
  <div class="item card">Hello</div>
  <div class="item card">Hello</div>
  <div class="item note">Note</div>
  <div class="item note">Note</div>
  <div class="item note">Note</div>
</div>

如何指定.note div应该在新行中开始。

css

来源：https://stackoverflow.com/questions/76554561/starting-a-new-row-in-css-grid

3条答案

按热度按时间

xt0899hw1#

因为没有指定要放入哪一行，所以第二行中有第一个.note元素的空间，所以它放在那里。因此，只需告诉这些元素位于哪一行，例如grid-row: 3等。

* {
        border: 1px solid;
      }
      .wrapper {
        display: grid;
        grid-template-columns: repeat(12,1fr);
        grid-template-rows: auto;
        gap: 24px;
      }
      .item{
        padding: 24px;
      }

      .banner-img{
        grid-column: span 12;
      }

      .card{
        grid-row: 2;
        grid-column: span 4;
      }

      .note{
        grid-row: 3;
        grid-column: span 3;
      }

<div class="wrapper">
      <div class="item banner-img">Hello</div>
      <div class="item card">Hello</div>
      <div class="item card">Hello</div>
      <div class="item note">Note</div>
      <div class="item note">Note</div>
      <div class="item note">Note</div>
    </div>

赞(0）回复(0）举报 2023-07-01

c9qzyr3d2#

将grid-row: 3设置为note应该可以解决您的问题

* {
  border: 1px solid;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

.item {
  padding: 24px;
}

.banner-img {
  grid-column: span 12;
}

.card {
  grid-column: span 4;
}

.note {
  grid-column: span 3;
  grid-row: 3;
}

<div class="wrapper">
  <div class="item banner-img">Hello</div>
  <div class="item card">Hello</div>
  <div class="item card">Hello</div>
  <div class="item note">Note</div>
  <div class="item note">Note</div>
  <div class="item note">Note</div>
</div>

赞(0）回复(0）举报 2023-07-01

xn1cxnb43#

一种方法是添加跨度为4的第三个卡片项目。如果你不能，你可以给予另一个跨度的第二个卡项目，这是第三个项目的 Package

* {
  border: 1px solid;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

.item {
  padding: 24px;
}

.banner-img {
  grid-column: span 12;
}

.card {
  grid-column: span 4;
}

.card:nth-child(3) {
  grid-column: span 8;
}

.note {
  grid-column: span 3;
}

<div class="wrapper">
  <div class="item banner-img">Hello</div>
  <div class="item card">Card</div>
  <div class="item card">Card</div>
  <div class="item note">Note</div>
  <div class="item note">Note</div>
  <div class="item note">Note</div>
</div>

赞(0）回复(0）举报 2023-07-01

我来回答

在CSS网格中开始新行

3条答案

相关问题

热门标签

最新问答