【Web前端实操15】利用Grid布局完成九宫格

相关知识点:

创建多列

column-count 属性指定了需要分割的列数

列与列之间的间隙

column-gap 属性指定了列与列间的间隙

列边框

column-rule-style 属性指定了列与列间的边框样式

column-rule-width 属性指定了两列的边框厚度

column-rule-color 属性指定了两列的边框颜色

column-rule 属性是 column-rule-*所有属性的简写

column-rule: 1px solid lightblue;

Grid 布局

属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。

display 属性

display: grid指定一个容器采用网格布局

代码如下:




    
    

你可能感兴趣的:(Web前端实操,前端,css,javascript,html,开发语言)