在2栏布局中采用2栏，但在没有@media的CSS网格中的1栏布局中不采用 [英] Take 2 columns in 2-columns layout but not when 1-column layout in CSS grid without @media

问题描述

所需的宽屏布局：

窄屏幕的所需布局：

初始css：

.Layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px 40px;
}

如果我为第三个元素设置grid-column-start: span 2，布局将被简单地破坏(它发生在CSS grid ignores minimal width specified in minmax() in second column问题中)。

请不要使用媒体查询，因为这将使宣布的基于可用空间的响应无效，该响应在CSS网格中可用。

网格具有两个极其强大的功能，可用于处理 可用空间。

<；...>；

依赖于媒体查询的布局绑定到视窗，这 不是模块化的-系统中的组件需要能够适应 他们的可用空间。

🌎 了解CSS网格布局

请您明确表示：这是不可能的。如果您确定是这样并且熟练掌握了css网格。

推荐答案

使用grid-column: 1/-1;

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>

如果您希望始终最多有2列，可以如下所示进行编辑：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(240px,40vw), 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>

这篇关于在2栏布局中采用2栏，但在没有@media的CSS网格中的1栏布局中不采用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！