Question

我想要一个具有CSS网格布局的前3列和后2个等长列的简单网格。

有人可以帮助我吗？我在使用网格跨度时遇到问题。

Answer 1

令人惊讶的是，似乎没有办法使用CSS Grid来做到这一点。我可以看到它可以与subgrid s一起使用，但是它们尚不可用（截至2019年2月）。好消息是使用Flexbox这项任务非常简单。

.container,
.item { 
  box-sizing: border-box; 
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: red;
  height: 50px;
  border: 1px solid black;
}

/* Begin at 3rd child; end at 1st child */
.item:nth-child(-n +3) {
  flex-basis: calc(100% / 3);  
}

/* Begin at 4th item, apply to last child */
.item:nth-child(n+4) {
  flex-basis: calc(100% / 2);
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>  
</div>

https://jsfiddle.net/z9j1v3uc/1/

Answer 2

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid black;
  border-radius: 5px;
  background-color: cadetblue;
  padding: 1em;
  color: #d9480f;
}.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  
}
.one {
  grid-column: 1 /span 2;
  grid-row: 1;
}
.two { 
  grid-column: 3/span 2;
  grid-row: 1;
}
.three {
  grid-column: 5 /span 2;
  grid-row: 1;
}

.four {
  grid-column: 1/ span 3 ;
  grid-row: 2;
}
.five {
  grid-column: 4 / span 4;
  grid-row: 2;
}

      <div class="wrapper">
      <div class="one">One</div>
      <div class="two">Two</div>
      <div class="three">Three</div>
      <div class="four">Four</div>
      <div class="five">Five</div>
    </div>

CSS网格布局3列和2列网格

2 个答案: