英文:
Centering a grid with flexbox changes grid structure
问题
HTML 中的代码如下所示：
<h2>我的简单网格</h2>
<div class="grid-holder">
<div class="grid-container grid-container--fill">
<div class="grid-element">
1
</div>
<div class="grid-element">
2
</div>
<div class="grid-element">
3
</div>
<div class="grid-element">
4
</div>
</div>
</div>
CSS 中的代码如下所示：
.grid-container {
display: grid;
}
.grid-container--fill {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid-element {
background-color: darkGreen;
padding: 20px;
color: #fff;
border: 1px solid #fff;
}
.grid-holder{
display: flex;
flex-direction: column;
}
body {
padding: 2em;
}
当前结果：
期望结果：
希望网格元素 1、2、3、4 保持水平排列，同时 grid-holder div 保持居中，见下图：
你还想知道为什么需要使用 flex-direction: column 吗？有没有犯了什么愚蠢的错误或者忘记了基础知识？谢谢！
英文:
I am making a horizontal grid that contains 4 divs, I want the grid to be horizontally centered, so I wrap my grid container with another div so that it will act as a flexbox parent and try to center it (check the code below), while the grid has been centered the horizontal grid has now become a vertical grid
HTML:
<h2>My Simple Grid</h2>
<div class="grid-holder">
<div class="grid-container grid-container--fill">
<div class="grid-element">
1
</div>
<div class="grid-element">
2
</div>
<div class="grid-element">
3
</div>
<div class="grid-element">
4
</div>
</div>
</div>
CSS:
.grid-container {
display: grid;
}
.grid-container--fill {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid-element {
background-color: darkGreen;
padding: 20px;
color: #fff;
border: 1px solid #fff;
}
.grid-holder{
display: flex;
flex-direction: column;
align-items: center;
}
body {
padding: 2em;
}
Current Result:
current result
Expected Outcome:
Grid elements 1,2,3,4 should remain horizontal while the grid-holder div remains centered, sorry for the bad drawing
my drawing of expected result
I also want to know why did I need to use flex-direction: column ? Am I making any silly mistake, or forgot the basics ? Thanks in advance.
答案1
得分: 1
在将align-items: center;添加到你的弹性容器grid-holder后，对于类grid-container--fill，将grid-template-columns设置为auto-fill会隐式创建许多列，每个项目将填充整行，以填充尽可能多的列，然后元素将居中显示，但每行只会显示一个元素。要解决这个问题，将auto-fill改为4，以指定每行应显示的列数，如下所示：
.grid-container {
display: grid;
}
.grid-container--fill {
grid-template-columns: repeat(4, minmax(100px, 1fr));
}
.grid-element {
background-color: darkGreen;
padding: 20px;
color: #fff;
border: 1px solid #fff;
}
.grid-holder{
display: flex;
flex-direction: column;
align-items: center;
}
body {
padding: 2em;
}
<h2>My Simple Grid</h2>
<div class="grid-holder">
<div class="grid-container grid-container--fill">
<div class="grid-element">
1
</div>
<div class="grid-element">
2
</div>
<div class="grid-element">
3
</div>
<div class="grid-element">
4
</div>
</div>
</div>
英文:
After you added align-items: center; to your flex container grid-holder, And with grid-template-columns set to auto-fill for the class grid-container--fill many columns are implicitly created with each item to fill the whole row with as many columns as it can, then the elements will be centred but only one element will be shown in a row, To fix that change the auto-fill by 4 to precise the number of columns that should be displayed in each row as follow:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid-container {
display: grid;
}
.grid-container--fill {
grid-template-columns: repeat(4, minmax(100px, 1fr));
}
.grid-element {
background-color: darkGreen;
padding: 20px;
color: #fff;
border: 1px solid #fff;
}
.grid-holder{
display: flex;
flex-direction: column;
align-items: center;
}
body {
padding: 2em;
}
<!-- language: lang-html -->
<h2>My Simple Grid</h2>
<div class="grid-holder">
<div class="grid-container grid-container--fill">
<div class="grid-element">
1
</div>
<div class="grid-element">
2
</div>
<div class="grid-element">
3
</div>
<div class="grid-element">
4
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论