没有媒体查询的CSS网格最大列

Question

是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？

我有隐式类，允许行包装到新行上，但是没有最大列数。

这是使用弹性盒的一种方法的代码笔

CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

另一种方法是使用网格

.grid {
  display: grid;
  counter-reset: grid-items;
  position: relative;
}


.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？

Answer 1

使用flexbox，您可以简单地将a设置max-width为容器，因为您的元素具有固定的宽度：

.flex-container {

  display: flex;

  flex-wrap: wrap;

  max-width:calc(5*(200px + 20px));

}



.flex-item {

  background: tomato;

  padding: 5px;

  width: 200px;

  height: 100px;

  margin: 10px;



  line-height: 100px;

  color: white;

  font-weight: bold;

  font-size: 2em;

  text-align: center;

  box-sizing:border-box;

}


<div class="flex-container wrap">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

  <div class="flex-item">4</div>

  <div class="flex-item">5</div>

  <div class="flex-item">6</div>

  <div class="flex-item">7</div>

  <div class="flex-item">8</div>

</div>

唯一的缺点是您需要知道元素的宽度及其边距才能正确设置max-width。

如果您希望元素扩展并覆盖所有宽度，可以使用以下技巧min-width：

.flex-container {

  display: flex;

  flex-wrap: wrap;

}



.flex-item {

  background: tomato;

  padding: 5px;

  min-width: 200px;

  width:calc(100%/5 - 20px); /*5 columns*/

  height: 100px;

  margin: 10px;



  line-height: 100px;

  color: white;

  font-weight: bold;

  font-size: 2em;

  text-align: center;

  box-sizing:border-box;

}


<div class="flex-container wrap">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

  <div class="flex-item">4</div>

  <div class="flex-item">5</div>

  <div class="flex-item">6</div>

  <div class="flex-item">7</div>

  <div class="flex-item">8</div>

</div>

在这里，您还需要考虑边距，您可以使用CSS变量轻松地使它更加灵活：

.flex-container {

  display: flex;

  flex-wrap: wrap;

}



.flex-item {

  --m:10px;

  background: tomato;

  padding: 5px;

  min-width: 200px;

  width:calc(100%/5 - 2*var(--m)); /*5 columns*/

  height: 100px;

  margin: var(--m);



  line-height: 100px;

  color: white;

  font-weight: bold;

  font-size: 2em;

  text-align: center;

  box-sizing:border-box;

}


<div class="flex-container wrap">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

  <div class="flex-item">4</div>

  <div class="flex-item">5</div>

  <div class="flex-item">6</div>

  <div class="flex-item">7</div>

  <div class="flex-item">8</div>

</div>

您还可以考虑flex-grow是否希望元素始终扩展（即使有换行），但是您可能会遇到需要修复一些问题的最后一行的问题：

.flex-container {

  display: flex;

  flex-wrap: wrap;

  --m:10px;

}



.flex-item {

  background: tomato;

  padding: 5px;

  min-width: 200px;

  flex-grow:1;

  width:calc(100%/5 - 2*var(--m)); /*5 columns*/

  height: 100px;

  margin: var(--m);



  line-height: 100px;

  color: white;

  font-weight: bold;

  font-size: 2em;

  text-align: center;

  box-sizing:border-box;

}



.flex-container span {

  min-width: 200px;

  flex-grow:1;

  width:calc(100%/5 - 2*var(--m)); /*5 columns*/

  margin:0 var(--m);

}


<div class="flex-container wrap">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

  <div class="flex-item">4</div>

  <div class="flex-item">5</div>

  <div class="flex-item">6</div>

  <div class="flex-item">7</div>

  <div class="flex-item">8</div>



  <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>

在下面的示例中，我们将列数设置为5，因此，如果在最后一行中有1-4个元素，则至少需要4个空元素才能解决此问题。当然，这是一个缺点，但是由于您知道列数，因此可以轻松设置这些空元素，并且不需要任何JS。

为了使其更加灵活，这是一个带有CSS变量的想法：

.flex-container {

  display: flex;

  flex-wrap: wrap;

  border:1px solid;

  --m:10px;

  --n:5;

  --width:150px;

}



.flex-item {

  background: tomato;

  min-width: var(--width);

  flex-grow:1;

  width:calc(100%/var(--n) - 2*var(--m));

  height: 50px;

  margin: var(--m);



  box-sizing:border-box;

}



.flex-container span {

  display:contents; /* each span will give us 2 elements*/

}

.flex-container span:before,

.flex-container span:after,

.flex-container:before,

.flex-container:after{

  content:"";

  min-width: var(--width);

  flex-grow:1;

  width:calc(100%/var(--n) - 2*var(--m));

  margin:0 var(--m);

  order:1; /*we make sure they are at the end*/

}


<div class="flex-container wrap">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

  <div class="flex-item">4</div>

  <div class="flex-item">5</div>

  <div class="flex-item">6</div>

  <div class="flex-item">7</div>

  <div class="flex-item">8</div>



  <!-- a lot of elements !! -->

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>



<div class="flex-container wrap" style="--n:10">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

  <div class="flex-item">4</div>

  <div class="flex-item">5</div>

  <div class="flex-item">6</div>

  <div class="flex-item">7</div>

  <div class="flex-item">8</div>



  <!-- a lot of elements !! -->

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>



<div class="flex-container wrap" style="--n:3">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

  <div class="flex-item">4</div>

  <div class="flex-item">5</div>

  <div class="flex-item">6</div>

  <div class="flex-item">7</div>

  <div class="flex-item">8</div>



  <!-- a lot of elements !! -->

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>

我曾经display:contents能够设置N个空元素，以后将其视为2 * N，这可以减少代码。

如果您将有7列，我们将只需要6个额外的元素。我们可以使用两个伪元素，然后仅使用2个空元素来覆盖其余的4个。