时间戳

首页 > 解决方案 > 当没有足够的项目来填充一行时如何在网格中居中列

css - 当没有足够的项目来填充一行时如何在网格中居中列

问题描述

我正在尝试将网格中的某些列居中对齐，但前提是容器中没有足够的项目导致它包含多于一行。当包裹在物品中的踢脚时，应与左侧对齐。网格中的项目数是动态的，宽度以百分比形式指定。

我目前正在使用 flexbox，但也看过 css-grid。我知道如果项目数少于一行中的列数，我可以通过向容器添加另一个类来轻松实现这一点，但如果可能的话，我正在寻找仅 CSS 的解决方案。我一直在寻找一种方法来定位任何被包装到另一行并覆盖 justify-content 的元素，但我认为我可能以错误的方式处理这个问题。似乎它应该很容易！

.grid {
  display: flex;  
  flex-wrap: wrap;
  justify-content: center;
  background: pink;
}
.column {
  width: 25%;
  height: 100px;
  background: green;
  border: 1px solid black;
  box-sizing: border-box;
}
.justify-left {
  justify-content: left;
}
<h2>How it looks with less than 4 items</h2>  
<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

<h2>How it looks with more than 4 items</h2>  
<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
  
<h2>How it should look with more than 4 items</h2>  
<div class="grid justify-left">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

标签： cssflexboxcss-grid

解决方案

推荐阅读