使用 drid布局 实现 左竖1 右横2 右横3 布局
时间: 2023-12-30 12:02:00 浏览: 13
可以使用 CSS Grid 布局来实现左竖1、右横2、右横3的布局。以下是一个实现示例:
HTML代码:
```html
<div class="container">
<div class="item item1">左竖1</div>
<div class="item item2">右横2</div>
<div class="item item3">右横3</div>
</div>
```
CSS代码:
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-rows: 1fr;
grid-gap: 10px;
}
.item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
.item1 {
grid-row: 1;
}
.item2 {
grid-column: 2 / 3;
}
.item3 {
grid-column: 3 / 4;
}
```
在上面的代码中,`.container` 是一个 CSS Grid 容器,我们通过设置 `grid-template-columns` 和 `grid-template-rows` 属性来定义容器的列和行数,这里我们定义了 3 列和 1 行,并且左竖1占据了第一行。
接着,我们通过设置子元素的 `grid-row` 和 `grid-column` 属性来控制子元素在网格中的位置和大小,来实现右横2和右横3的布局。
需要注意的是,`grid-row` 和 `grid-column` 属性的值可以是一个数值,也可以是一个范围(用 `/` 分隔),表示子元素跨越的行或列的数量。在本例中,`.item2` 和 `.item3` 分别跨越了 1 列和 2 列。
通过这种方式,我们就可以使用 CSS Grid 布局来实现左竖1、右横2、右横3的布局。