代码之家 › 专栏 › 技术社区 › Razvan Zamfir

具有不等高和不等宽列的css网格

css-grid css3 css

3

Razvan Zamfir · 技术社区 · 7 年前

我有五个箱子:第一排三个,第二排两个:

我要所有的盒子但是第二个高度相等和 5 ^钍盒子放在3号下面 ^钍 .

我用flexbox试过,现在用 display: grid . 我在找一个css 只有如果可能的话。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: min-content;
  grid-gap: 0;
  background-color: #2196F3;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
  font-size: 30px;
}
.item4 {
  grid-column-start: 1;
  grid-column-end: 3;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

下面的图片很好地说明了我要找的东西:

我该怎么做才能达到预期的效果?

2 回复 | 直到 7 年前

1

IP_ 7 年前

对父容器使用网格模板区域,并为子项指定网格区域。

.grid-container {
  display: grid;
  grid-template-areas: 'left middle right';
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-gap: 0;
  background-color: #2196F3;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
  font-size: 30px;
}
.item1 {
  grid-area: left;
  grid-row: auto;
}
.item2 {
  grid-area: middle;
  grid-row: auto / span 2;
};
.item3 {
  grid-area: right;
  grid-row: auto;
};
.item4 {
  grid-area: left;
  grid-row: auto;
};
.item5 {
  grid-area: right;
  grid-row: auto;
}

<div class="grid-container">
      <div class="item1"><p><strong>Item1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
      <div class="item2"><p><strong>Item2</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
      <div class="item3"><p><strong>Item3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
      <div class="item4"><p><strong>Item4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
      <div class="item5"><p><strong>Item5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

2

1

Michael Benjamin William Falcon 7 年前

这里有一个方法使用 line-based placement .

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 5px;
  padding: 5px;
  height: 100vh;
  background-color: #2196F3;
}

/* line-based placement */
.item1 { grid-column: 1 / 2; grid-row: 1 / 4; }
.item2 { grid-column: 2 / 3; grid-row: 1 / 8; }
.item3 { grid-column: 3 / 4; grid-row: 1 / 4; }
.item4 { grid-column: 1 / 3; grid-row: 8 / 11; }
.item5 { grid-column: 3 / 4; grid-row: 4 / 11; }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }

<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

这里有另一种方法 grid-template-areas .

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 5px;
  padding: 5px;
  height: 100vh;
  background-color: #2196F3;
  
  grid-template-areas:
  
    " item1 item2 item3 "
    " item1 item2 item3 "
    " item1 item2 item3 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    " item4 item4 item5 "
    " item4 item4 item5 "
    " item4 item4 item5 ";
}

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }

<div class=“网格容器”>
<div class=“item1”><p>Lorem ipsum dolor sit amet,consectetur adipiscing精英酒店。</p></div>
<在苏西皮特康塞克乌拉姆多洛德特内图尔的广场上,有一个崭新的布朗迪蒂家。临时官方的德莱尼提(nostrum deleti id temporibus officia),即劳丹蒂布(voluptatibus laudantium ad porro)</p></div>
<
<div class=“item4”><p>Lorem ipsum dolor sit amet,consectetur adipiscing精英酒店。</p></div>
<div class=“item5”><p>Lorem ipsum dolor sit amet,consectetur adipiscing精英酒店。</p></div>
&L/DIV & GT;