是否可以在 Bootstrap 3 网格中间有一个大单元格？

Posted 2023-03-06

【中文标题】是否可以在 Bootstrap 3 网格中间有一个大单元格？

【英文标题】：Is it possible to have a large cell in the middle of a Bootstrap 3 grid?

【发布时间】：2020-09-13 16:23:40

【问题描述】：

是否可以使用 Bootstrap 3 Grid CSS 有一个更大的跨行和列的嵌套单元格？

【参考方案1】：

不需要任何引导程序。您只需要使用grid-area 设置一个单元格。更多信息在这里https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

浏览器支持grid-area https://caniuse.com/#search=grid-area 感谢Gerard

.grid 
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
min-height: 300px;


.grid > div 
background: #ccc;


.grid > div.my-big-sell     
grid-area: 2 / 2 / 4 / 6;
background: #000;

<div class="grid">
  <div class="my-big-sell"> </div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

小心browser support

哦，天哪，所以我什至不需要 Bootstrap 网格。极好的。我想是时候学习 CSS Grid了

更新了浏览器支持链接的答案，感谢@Gerard。为了更好地理解网格区域的工作原理 - 试试这个生成器 cssgrid-generator.netlify.app。

是否可以在没有媒体查询的情况下使 CSS 网格响应？例如随着浏览器宽度的减小，列数从 6 减少到 5，依此类推。

不幸的是 - 没有。使用grid-template-columns，您还必须更新grid-area（在这种情况下，5 列grid-area 将是2 / 2 / 4 / 5）