英文:
CSS grid: Dynamic column number and not exceeding parent width
问题
如何使网格项适应容器？
如果容器中有更多的项，然后将它们包装起来并添加更多的行
- 第二个示例应该包装成多行
- 网格应水平居中在容器中（左右内边距相等）
- 所有项必须具有相同的高度
代码示例：https://jsfiddle.net/zLo8jw4d/
section {
max-width: 500px;
min-height: 50px;
background: gray;
}
ul {
display: grid;
grid-auto-flow: column;
gap: 5px;
list-style-type: none;
background: red;
}
li {
width: 150px;
background: yellow;
}
a {
display: block;
min-height: 100%;
padding: 5px;
color: inherit;
text-decoration: none;
}
<section>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
</ul>
</section>
<section>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
<li><a>item 4</a></li>
<li><a>item 5</a></li>
</ul>
</section>
英文:
How to make grid items fit the container?
If there are more items than fit in the container, then wrap them and add more rows
- The second example should wrap into more than one row
- The grid should center horizontally in the container (equal left/right padding)
- All items must have the same height
https://jsfiddle.net/zLo8jw4d/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
section {
max-width: 500px;
min-height: 50px;
background: gray;
}
ul {
display: grid;
grid-auto-flow: column;
gap: 5px;
list-style-type: none;
background: red;
}
li {
width: 150px;
background: yellow;
}
a {
display: block;
min-height: 100%;
padding: 5px;
color: inherit;
text-decoration: none;
}
<!-- language: lang-html -->
<section>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
</ul>
</section>
<section>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
<li><a>item 4</a></li>
<li><a>item 5</a></li>
</ul>
</section>
<!-- end snippet -->
答案1
得分: 3
Flex对于你的情况来说确实更简单。如果你确实需要使用CSS Grid，你可以在grid-template columns中使用"auto-fit"，以使容器填充项目，或者在宽度不足以容纳所有列表项时创建新行。
此外，justify-content:center将居中对齐你的li项目，并创建等宽的x内边距。
section {
max-width: 80%;
min-height: 50px;
background: gray;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 150px));
gap: 5px;
list-style-type: none;
background: red;
justify-content: center;
}
li {
width: 150px;
background: yellow;
}
a {
display: block;
min-height: 100%;
padding: 5px;
color: inherit;
text-decoration: none;
}
你可以阅读更多关于"auto-fit"和"auto-fill"的信息这里。
英文:
Flex is really simpler for your case. If you really need to use CSS Grid, you can use "auto-fit" in your grid-template columns, to make the container fill up with items, or create a new row, if the width is not enough for all your list items.
Also justify-content:center will center your li items, and create an equal x-padding.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
section {
max-width: 80%;
min-height: 50px;
background: gray;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 150px));
gap: 5px;
list-style-type: none;
background: red;
justify-content: center;
}
li {
width: 150px;
background: yellow;
}
a {
display: block;
min-height: 100%;
padding: 5px;
color: inherit;
text-decoration: none;
}
<!-- language: lang-html -->
<section>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
</ul>
</section>
<section>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
<li><a>item 4</a></li>
<li><a>item 5</a></li>
</ul>
</section>
<!-- end snippet -->
https://codepen.io/aggepap/pen/QWZEdXJ
You can read more about auto-fit and auto-fill here
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论