CSS网格问题与背景和包装 [英] css grid problem with background and wrapping
问题描述
我有一个网格,我希望它能像它那样工作,除了只有1或2个单元格时,我希望它能够自动调整大小,而不是由3个组成的集合,而最后一个保留其单元格空间.当我将repeat(3,100px)值设置为自动适应时,它将终止列布局. 我仍然需要将其包裹在3点.
I have a grid where I want it to work somewhat like it is except when there are only 1 or 2 cells I want it to auto size and not be a set of 3 with the last one holding its cell space. When I set repeat(3, 100px) value to auto-fit then it kills the column layout. I still need it to wrap at 3.
.parent {
background: #f4f4f5;
font-size:2em;
border: 1px solid black;
padding: 20px 0;
text-align: center;
width: 100%;
}
.parent .wrapper {
display: inline-grid;
grid-template-columns: repeat(3, 100px);
box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
grid-auto-flow: row;
background-color: white;
}
.cell {
border: 1px solid gray;
background-color: white;
}
.cell .inner {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
text-align: center;
}
<div class="parent">
<div class="wrapper">
<div class="cell">
<div class="inner">Cell 1</div>
</div>
<div class="cell">
<div class="inner">Cell 2</div>
</div>
<div class="cell">
<div class="inner">Cell 3</div>
</div>
<div class="cell">
<div class="inner">Cell 4</div>
</div>
</div>
</div>
推荐答案
因此,您要使网格容器自动调整大小,使其少于3个项目,然后自动换行-这是一种使用以下解决方案的解决方案隐式网格.
So you want to make the grid-container auto-sized less that 3 items and wrap after that - here's a solution that uses implicit grids.
-
使用单列嵌入式网格容器:
display: inline-grid;
grid-template-columns: 100px;
grid-template-rows: 100px;
使用以下方法将隐式网格的大小设置为100px x 100px:
size your implicit grids as 100px x 100px using:
grid-auto-columns: 100px;
grid-auto-rows: 100px;
使用grid-column: 2
将您的第二项放入第二行;和您的第三项使用grid-column: 3
place your second item to the second row using grid-column: 2
; and your third item to the third row using grid-column: 3
现在您将拥有一个3 x 3的网格-参见下面的演示:
Now you will have a 3 x 3 grid - see demo below:
* {
box-sizing: border-box;
}
.parent {
background: #f4f4f5;
font-size: 2em;
border: 1px solid black;
padding: 20px 0;
text-align: center;
width: 100%;
}
.parent .wrapper {
display: inline-grid;
grid-template-columns: 100px; /* one column layout */
grid-template-rows: 100px; /* sizes the rows */
grid-auto-columns: 100px; /* sizing columns of implicit grid */
grid-auto-rows: 100px; /* sizing rows of implicit grid */
box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
grid-auto-flow: row;
background-color: white;
}
.cell:nth-child(2) {
grid-column: 2; /* places it in the second column */
}
.cell:nth-child(3) {
grid-column: 3; /* places it in the third column */
}
.cell {
border: 1px solid gray;
background-color: white;
}
.cell .inner {
display: flex;
justify-content: center;
align-items: center;
/* width: 100px; */
/* height: 100px; */
height: 100%; /* added */
text-align: center;
}
<div class="parent">
<div class="wrapper">
<div class="cell">
<div class="inner">Cell 1</div>
</div>
</div>
</div>
<div class="parent">
<div class="wrapper">
<div class="cell">
<div class="inner">Cell 1</div>
</div>
<div class="cell">
<div class="inner">Cell 2</div>
</div>
</div>
</div>
<div class="parent">
<div class="wrapper">
<div class="cell">
<div class="inner">Cell 1</div>
</div>
<div class="cell">
<div class="inner">Cell 2</div>
</div>
<div class="cell">
<div class="inner">Cell 3</div>
</div>
</div>
</div>
<div class="parent">
<div class="wrapper">
<div class="cell">
<div class="inner">Cell 1</div>
</div>
<div class="cell">
<div class="inner">Cell 2</div>
</div>
<div class="cell">
<div class="inner">Cell 3</div>
</div>
<div class="cell">
<div class="inner">Cell 4</div>
</div>
</div>
</div>
<div class="parent">
<div class="wrapper">
<div class="cell">
<div class="inner">Cell 1</div>
</div>
<div class="cell">
<div class="inner">Cell 2</div>
</div>
<div class="cell">
<div class="inner">Cell 3</div>
</div>
<div class="cell">
<div class="inner">Cell 4</div>
</div>
<div class="cell">
<div class="inner">Cell 5</div>
</div>
<div class="cell">
<div class="inner">Cell 6</div>
</div>
<div class="cell">
<div class="inner">Cell 7</div>
</div>
<div class="cell">
<div class="inner">Cell 8</div>
</div>
<div class="cell">
<div class="inner">Cell 9</div>
</div>
<div class="cell">
<div class="inner">Cell 10</div>
</div>
</div>
</div>
这篇关于CSS网格问题与背景和包装的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!