列之间具有相等嵌套行的 Flexbox Grid答案

【问题标题】：Flexbox Grid with equal nested rows between columns列之间具有相等嵌套行的 Flexbox Grid
【发布时间】：2018-03-07 15:34:20
【问题描述】：

我正在使用 Flexbox 网格 css 库 - flexboxgrid.com 并进行三列布局。在这三列布局中，我将在每一列中嵌套行。

我想实现嵌套行的高度也与所有其他列相同。

这是我目前正在实现的目标：

Current Achievement我希望第 4 节与第 2 节完全对齐。

我还做了一个JSFiddle 来展示我目前正在取得的成就。

HTML：

<div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome">
        <div class="box">
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div class="box">Section1<br/><br/><br/></div>
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div class="box">Section2<br/><br/><br/></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome">
    <div class="box">
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div class="box">Section3<br/><br/><br/><br/></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div class="box">Section4<br/><br/><br/></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome">
       <div class="box">
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div class="box">Section5</div>
                </div>
            </div>
        </div>
    </div>
</div>

关于如何实现这一点的任何解决方案？

【问题讨论】：

查看stackoverflow.com/questions/46398498/…
@LGSon - 所以我无法使用 flexboxgrid css 库来实现这一点？
你可以，如果你让他们成为兄弟姐妹
CSS 网格的绝对案例
@Paulie_D CSS Grid 的项目仍然需要同级，对吧？

标签： css flexbox flexboxgrid

【解决方案1】：

@Paulie_D 在他的建议中使用CSS grid 是正确的。如您所见，我已在第 1、第 2 和第 4 项中添加了换行符，并且整个第 2 行都调整了它们各自的高度。希望这是您希望的行为：

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.c {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	.d {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.f {
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.a {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	.b {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.e {
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 1;
		grid-row-end: 2;
	}

<div class="wrapper">
  <div class="box a">A<br/><br/><br/></div>
  <div class="box b">B<br/><br/><br/></div>
  <div class="box c">C</div>
  <div class="box d">D<br/><br/><br/><br/><br/></div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

【讨论】：