当前位置: 首页 > Web前端 > HTML

网格布局快速入门

时间:2023-04-02 20:24:35 HTML

网格布局快速入门网格布局常用属性快速入门简介让我们从一个简单的网格布局示例开始。CSSGrid布局由两个核心组件wrapper(父元素)和items(子元素)组成。wrapper是实际的网格(grid),items是网格(grid)的内容。下面是一个wrapper元素,包含6个item:1

2
3
4
56要将包装元素变成网格(grid),只需将其显示属性设置为grid。wrapper{display:grid;}Columns(列)和rows(行)要使其成为一个二维网格容器,我们需要定义columns和rows。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。.wrapper{显示:网格;网格模板列:100px100px100px;grid-template-rows:50px50px;}grid-template-columns的三个值表示三列,对应的值表示列宽为100px。grid-template-rows的2个值代表两行,对应的值代表行高为50px。结果如下:我们可以改变行高和列宽看看效果。代码:.wrapper{显示:网格;网格模板列:200px50px100px;grid-template-rows:100px50px;}效果图:持续更新,欢迎指导!