我遇到了 CSS 网格问题。我想知道是否可以为每个网格行设置不同的宽度。
我的网格设置如下:
.section.section--3 .text {
display: grid;
justify-content: center;
padding: 0 10% 0;
text-align: center;
}
所以我基本上希望嵌套在文本 div 中的标题、段落和按钮具有不同的宽度,而不使用最大宽度,并且不填充整行。原因是我的按钮应该根据内部文本的长度动态调整宽度。
我的 HTML 如下:
<div class="text">
<h2 class="text__item item--heading">
Heading
</h2>
<p class="text__item item--paragraph">
Paragraph
</p>
<a href="#" class="text__item item--button button button--primary">
Button
</a>
</div>
这张图片基本上说明了我想要实现的目标。
谢谢。
最佳答案
是的,这是可能的,而且有很多不同的方式。
让我展示一个:
.grid {
display: grid;
grid-template-columns: 20% 60%; /* Column width size here*/
grid-template-rows: 100px 200px; /* Row height size here*/
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.item.a{
background-color: red;
}
.item.b{
background-color: green;
}
.item.c{
background-color: blue;
}
.item.d{
background-color: yellow;
}
<div class="grid">
<div class="item a"></div>
<div class="item b"></div>
<div class="item c"></div>
<div class="item d"></div>
</div>
如果您真的喜欢 CSS 网格布局并想了解更多信息,我会推荐您这个网站 here .
希望对你有帮助,:)
关于html - CSS 网格行具有不同的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59681034/