grid布局均分行和列 行的元素宽度为90px,列的高度为64px
时间: 2024-02-16 17:04:45 浏览: 25
要使用 grid 布局均分行和列,可以设置网格容器的行列属性为 repeat,然后指定每行和每列的大小。
具体实现代码如下:
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(64px, 1fr));
grid-gap: 10px; /* 可选,设置网格之间的间距 */
}
```
其中,`repeat(auto-fit, minmax(90px, 1fr))` 表示自适应的重复列,最小宽度为 90px,最大宽度为 1fr(即剩余空间的平均分配);`repeat(auto-fit, minmax(64px, 1fr))` 表示自适应的重复行,最小高度为 64px,最大高度为 1fr。
这样就可以实现行和列的均分,并且每个格子的宽度为 90px,高度为 64px。
相关问题
css代码:grid布局,两行三列,最右、最左列宽10px,
可以使用以下 CSS 代码实现:
```css
.container {
display: grid;
grid-template-columns: 10px auto 1fr auto 1fr 10px;
grid-template-rows: auto auto;
grid-gap: 10px;
}
/* 示例样式 */
.container > * {
border: 1px solid #333;
padding: 10px;
}
```
这里使用了 `grid-template-columns` 来定义列的宽度,第 1、6 列的宽度都是 10px,其余列使用 `1fr` 来平均分配剩余空间。同时使用 `grid-template-rows` 定义行的数量和高度,这里设置为自适应高度。
注意,这里使用了 `grid-gap` 来设置间距,如果不需要可以去掉。另外,示例样式是为了展示效果而添加的,你可以根据需要自行修改。
css grid布局 子元素自动换行 各个子元素水平间距20px,垂直间距50px
CSS Grid 布局是一种二维网格布局系统,它可以帮助我们轻松地创建复杂的布局。要实现子元素自动换行、各个子元素水平间距20px、垂直间距50px的效果,可以参考以下代码:
```html
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
```
```css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自动换行 */
grid-gap: 50px 20px; /* 垂直间距50px,水平间距20px */
}
.grid-item {
background-color: #ddd;
text-align: center;
}
```
这段代码会创建一个包含六个子元素的网格容器,并将子元素自动布局到网格中。`grid-template-columns` 属性的 `repeat(auto-fit, minmax(100px, 1fr))` 部分会让子元素自动换行,同时保证每个网格列的最小宽度为 100px,最大宽度为网格容器的宽度。 `grid-gap` 属性则用于设置网格行列之间的间距。