Question

我需要创建一个具有 3行的网格，每行具有 2列。

第一行列应为40％-60％
第二行两列均应为50％
第三行第一列应为60％，第二列应为40％。

各列之间应有一个10px装订线，并且对于小于992px的屏幕尺寸，所有列应为100%，同时仍要有10px“装订线”。

（每100％列下方，最后一个列应为10px天沟）。我正在努力以最佳方式做到这一点。

HTML：

<div class="flexrow">
   <div class="col-1"></div>
   <div class="col-2"></div>
   <div class="col-3"></div>
   <div class="col-4"></div>
   <div class="col-5"></div>
   <div class="col-6"></div>
</div>

CSS：

.flexrow{
   display: flex;
   align-items:stretch;
   flex-wrap: wrap;
}

我尝试过边距，但无法使其正常工作。

Answer 1

由于各种原因，这项工作比Flexbox更适合CSS Grid。

首先，使排水沟在Grid中工作很简单。您可以使用grid-gap属性，该属性在flexbox中尚不可用。

第二，您请求的“列”不是真正的列。一列从顶部到底部的宽度相同。您要的是masonry layout，它允许内容项跨越多个列和行。

同样，使用CSS Grid更容易完成此任务。

以下是一种可能适合您的解决方案（包括媒体查询）：

jsFiddle demo

.grid-container {
  display: grid;
  grid-auto-columns: 1fr;
  width: 500px;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.col-1 {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.col-2 {
  grid-column: 5 / span 6;
  grid-row: 1;
}

.col-3 {
  grid-column: 1 / span 5;
  grid-row: 2;
}

.col-4 {
  grid-column: 6 / span 5;
  grid-row: 2;
}

.col-5 {
  grid-column: 1 / span 6;
  grid-row: 3;
}

.col-6 {
  grid-column: 7 / span 4;
  grid-row: 3;
}

@media ( max-width: 992px ) {
  .grid-container>div {
    grid-column: 1;
    grid-row: auto;
  }
}

/* non-essential demo styles */

.grid-container {
  border: 1px solid black;
  background-color: lightgray;
}
.grid-container > div {
  font-size: 1.3em;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-container > div:nth-child(odd) {
  background-color: green;
}
.grid-container > div:nth-child(even) {
  background-color: orangered;
}

<div class="grid-container">
  <div class="col-1">40%</div>
  <div class="col-2">60%</div>
  <div class="col-3">50%</div>
  <div class="col-4">50%</div>
  <div class="col-5">60%</div>
  <div class="col-6">40%</div>
</div>

在上面的布局中，您创建的每一列的宽度为1fr。这意味着每一列都将容器中的可用空间平均分配。

您现在可以跨列创建具有所需宽度的网格区域。

例如，如果您希望“列”的宽度为60％，则告诉网格项目跨越六列（span 6）。

1fr的另一个好处是，在将所有固定宽度（例如装订线）都计入行的长度之后，将其应用。这意味着您不需要为十列就可以进行任何计算。

Answer 2

Flexbox通过justify-content的{{1}}值使此操作非常容易：

space-between

这可以确保尺寸正确时，这些物品将粘在容器的外边缘。

通过将伸缩项目的宽度设置为小于总宽度的100％，可以创建装订线。这里我们需要2列，因此您可以将项目的宽度设置为减去50％的宽度，以弥补装订线的宽度：

.flexrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

现在要设置第一行和第三行，只需相应地更改宽度：

.flexcol {
  width: calc(50% - 5px); // 50% minus 5px for each column, with 2 columns that's a 10px gutter space between the two columns.
  margin-bottom: 10px; //space between the rows, remove if you dont want that.
}

对于100％的992px变化，只需添加媒体查询并更新必要的值即可：

.col-1,
.col-6 {
  width: calc(40% - 5px); // here's the 40% ones
}

.col-2,
.col-5 {
  width: calc(60% - 5px); // and the 60% ones
}

@media (max-width: 992px) {
  .flexcol {
    width: 100%; // 100% width, no margin or anything to deal with because of the space-between layout approach
  }
  .col-5 {
    margin-bottom: 10px; // add this so the 5th and 6th items have space between them when 100% wide
  }
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #efefef;
}

.flexcol {
  width: calc(50% - 5px);
  margin-bottom: 10px;
  
  /* just for visibility */
  border: 1px solid red;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}

.col-1,
.col-6 {
  width: calc(40% - 5px);
}

.col-2,
.col-5 {
  width: calc(60% - 5px);
}

.col-5,
.col-6 {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .flexcol {
    width: 100%;
  }
  .col-5 {
    margin-bottom: 10px;
  }
}

Answer 3

我会使用flexbox（https://yoksel.github.io/flex-cheatsheet/）和一些边距来做到这一点，因为我认为没有“完美”或首选的方式可以做到这一点。

确保您还以全屏方式检查代码段，以查看列的％-wise分隔。

/*




I need to create a grid that has 3 rows, each row has 2 columns.

    First row columns should be 40% - 60%
    Second row both columns should be 50%
    Third row first column should be 60%, second column 40%.

The columns should have a 10px gutter in between the columns, and for screen sizes smaller then 992px all columns should be 100% while still having a 10px "gutter".

(Underneath every 100% column except the last one should be 10px gutter). I am struggling on how to do this the best way.

*/

.row {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  height: 100px;
}

.item1 {
  flex-basis: 40%;
  margin-right: 5px;
  background-color: red;
}

.item2 {
  flex-basis: 60%;
  margin-left: 5px;
  background-color: yellow;
}

.item3 {
  margin-right: 5px;
  flex-basis: 50%;
  background-color: blue;
}

.item4 {
  margin-left: 5px;
  flex-basis: 50%;
  background-color: pink;
}

.item5 {
  margin-right: 5px;
  flex-basis: 60%;
  background-color: grey;
}

.item6 {
  margin-left: 5px;
  flex-basis: 40%;
  background-color: brown;
}

@media(max-width: 992px) {
  .row {
    display: flex;
    flex-flow: row wrap;
    background-color: white;
    height: 100px;
  }
  .item1 {
    flex-basis: 100%;
    margin-right: 0px;
    background-color: red;
        margin-bottom: 10px;
  }
  .item2 {
    flex-basis: 100%;
    margin-left: 0px;
    background-color: yellow;
        margin-bottom: 10px;
  }
  .item3 {
    margin-right: 0px;
    flex-basis: 100%;
    background-color: blue;
        margin-bottom: 10px;
  }
  .item4 {
    margin-left: 0px;
    flex-basis: 100%;
    background-color: pink;
        margin-bottom: 10px;
  }
  .item5 {
    margin-right: 0px;
    flex-basis: 100%;
    background-color: grey;
        margin-bottom: 10px;
  }
  .item6 {
    margin-left: 0px;
    flex-basis: 100%;
    background-color: brown;
  }
}

<div class="row">
  <div class="item1"></div>
  <div class="item2"></div>
</div>
<div class="row">
  <div class="item3"></div>
  <div class="item4"></div>
</div>
<div class="row">
  <div class="item5"></div>
  <div class="item6"></div>
</div>

创建具有装订线和固定宽度的Flexbox网格

3 个答案: