如何使div跨网格中的多行和多列? [英] How can I make a div span multiple rows and columns in a grid?

问题描述

以上一个问题为基础，我是我试图在我的网格布局中添加更大的块.在最后一个问题中，我需要一个div跨多行.现在的问题是，我需要一个div来跨越多行和列.

Building off of a previous question, I'm trying to add bigger blocks to my grid layout. In the last question, I needed to have a div span multiple rows. The problem now is that I need a div to span multiple rows and columns.

如果我有一个五元素行，我怎么能将较大的元素放在中间? (如float放在侧面一样).

If I have a five-element row, how could I put bigger elements in the middle of it? (as float puts it naturally on the side).

这是一个示例片段:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}
.larger{
  height: 110px;
  width: 190px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我不想使用 display: grid 对于包装器元素，例如我可以使用 状态相当先进的技术.我希望有一个非网格，非表解决方案.

I don't want to use display: grid for the wrapper element, as Can I Use states this is a pretty on-the-edge technology right now. I was hoping for a non-grid, non-table solution.

这就是我希望从上面的摘录中得到的内容

Here's what I would like to have from the snippet above

推荐答案

按原样保留HTML，使用flexbox本身不可能进行布局.这主要是因为2 x 2框占据了第三和第四列.您可以获得的最接近的是这样:

Keeping your HTML as-is, the layout is not natively possible with flexbox. This is primarily because of the 2 x 2 box occupying the third and fourth columns. The closest you can get is this:

#wrapper{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 180px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  flex-basis: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

如您所见，大框在列之间被分解.

As you can see, the big box is broken up between columns.

如您引用的其他帖子所述，因为您的子元素(.block)的高度固定，我们可以确定容器的高度(.wrapper).

As mentioned in the other post you referenced, since you have fixed heights on your child elements (.block), we can determine the height of the container (.wrapper).

通过了解容器的高度，可以使用flex-direction: column和flex-wrap: wrap来实现上面的布局.

By knowing the height of the container, the layout above can be achieved using flex-direction: column and flex-wrap: wrap.

容器上的固定高度用作断点，告诉伸缩物品在哪里包装.

A fixed height on the container serves as a breakpoint, telling flex items where to wrap.

或者，如果可以添加容器，则布局很简单.只需创建四个嵌套的flex容器来容纳第1、2、3-4和5列，就可以完成.

Alternatively, if you can add containers, then the layout is easy. Just create four nested flex containers to hold columns 1, 2, 3-4 and 5, and you're done.

#wrapper {
  display: flex;
  width: 516px;
}

section {
  display: flex;
  flex-direction: column;
}

.block {
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}

.bigger {
  flex-basis: 110px;
}

section:nth-child(3) {
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 0 200px;
}

section:nth-child(3)>.block:last-child {
  flex: 0 0 190px;
  height: 110px;
}

<div id="wrapper">
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block bigger"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
</div>

否则，请参阅此帖子以获取更多详细信息和其他选项:

Otherwise, see this post for more details and other options:

• 弹性商品是否可以与上方的商品紧密对齐?

这篇关于如何使div跨网格中的多行和多列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！