免费做长图网站,怎样做公司网站推广,制作书签 小学生一年级,如何进行专业建设目录 一、grid布局是什么二、grid布局的属性三、容器属性1、display①、语句②、属性值 2、grid-template-columns属性、grid-template-rows属性①、定义②、属性值1#xff09;、固定的列宽和行高2#xff09;、repeat()函数3#xff09;、auto-fill关键字4#xff09;、f… 目录 一、grid布局是什么二、grid布局的属性三、容器属性1、display①、语句②、属性值 2、grid-template-columns属性、grid-template-rows属性①、定义②、属性值1、固定的列宽和行高2、repeat()函数3、auto-fill关键字4、fr关键字5、minmax()函数6、auto关键字 3、grid-row-gap属性、grid-column-gap属性、grid-gap属性4、grid-template-areas属性5、grid-auto-flow属性①、语法②、属性值 6、justify-items属性、align-items属性、place-items属性①、语法②、属性值 7、justify-content属性、align-content属性、place-content属性①、语法②、属性值 8、grid-auto-columns属性、grid-auto-rows属性 四、项目属性1、grid-column-start属性、grid-column-end 属性2、grid-row-start属性、grid-row-end 属性3、justify-self 属性、align-self 属性、place-self 属性①、语法②、属性值 五、应用场景六、Grid布局和flex布局二者区别七、总结 一、grid布局是什么
grid布局网络布局是目前唯一一种CSS二维布局方式一种新的CSS布局模型由纵横相交的两组网络线形成的框架性布局结构能够同时处理行与列。号称是最强大的CSS布局方案。 擅长将一个页面划分为几个主要区域以及定义这些区域的大小、位置、层次等关系 Grid布局是将容器划分成了“行”和“列”产生了一个个的网格我们可以将网格元素放在与这些行和列相关的位置上从而达到我们布局的目的。
二、grid布局的属性
Grid布局属性可以分为两大类
容器属性项目属性
三、容器属性
1、display
①、语句
.wrapper {display: grid / inline-grid;
}②、属性值
grid该容器元素是一个块级元素inline-grid该容器元素为行内元素 一旦声明这个元素的所有直系子元素将成为网格项目 2、grid-template-columns属性、grid-template-rows属性
①、定义
grid-template-columns属性设置列宽grid-template-rows属性设置行高
②、属性值
1、固定的列宽和行高
.wrapper {display: grid;/* 声明了三列宽度分别为 200px 100px 200px */grid-template-columns: 200px 100px 200px;grid-gap: 5px;/* 声明了两行行高分别为 50px 50px */grid-template-rows: 50px 50px;
}2、repeat()函数
可以简化重复的值该函数接受两个参数第一个参数是重复的次数第二个参数是所要重复的值。比如上面行高都是一样的我们可以使用repeat()函数进行实现实际效果是一样的
.wrapper {display: grid;grid-template-columns: 200px 100px 200px;grid-gap: 5px;/* 2行而且行高都为 50px */grid-template-rows: repeat(2, 50px);
}3、auto-fill关键字
表示自动填充让一行或者一列中尽可能的容纳更多的单元格
.wrapper-2 {display: grid;/* 列宽200但是列的数量是不固定的*/grid-template-columns: repeat(auto-fill, 200px);grid-gap: 5px;grid-auto-rows: 50px;
}4、fr关键字
fr单位代表网格中可用空间的一等份可以帮助我们创建灵活的网格轨道
.wrapper {display: grid;/* 第一个列宽设置为 200px第二个列宽为剩余宽度的1/3第三个列宽为剩余宽度的2/3 */grid-template-columns: 200px 1fr 2fr;grid-gap: 5px;grid-auto-rows: 50px;
}5、minmax()函数
有的时候我们想给网格元素一个最小和最大的尺寸minmax()函数产生一个长度范围表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数分别为最小值和最大值
.wrapper-4 {display: grid;/* 第三个列宽最少也是要 300px但是最大不能大于第一第二列宽的两倍。 */grid-template-columns: 1fr 1fr minmax(300px, 2fr);grid-gap: 5px;grid-auto-rows: 50px;
}6、auto关键字
由浏览器决定长度。通过auto关键字我们可以轻易实现三列或者两列布局
.wrapper-5 {display: grid;/* 表示第一第三列为 100px中间由浏览器决定长度自适应 */grid-template-columns: 100px auto 100px;grid-gap: 5px;grid-auto-rows: 50px;
}3、grid-row-gap属性、grid-column-gap属性、grid-gap属性
grid-row-gap属性、grid-column-gap属性分别设置行间距和列间距 grid-gap属性是两者的简写形式
grid-row-gap10px表示行间距是10pxgrid-column-gap30px表示列间距是30pxgrid-gap10px 30px表示行间距是10px列间距是30px
.wrapper-1 {display: grid;grid-template-columns: 200px 100px 100px;grid-auto-rows: 50px;/* 行间距是10px */grid-row-gap: 10px;/* 列间距是20px */grid-column-gap: 20px;
}.wrapper {display: grid;grid-template-columns: 200px 100px 100px;/* 行间距是10px; 列间距是20px */grid-gap: 10px 20px;grid-auto-rows: 50px;
}4、grid-template-areas属性
grid-template-areas属性用于定义区域一个区域由一个或者多个单元格组成 一般这个属性跟网格元素的grid-area一起使用在这里会一起介绍。grid-area属性指定项目放在哪一个区域 .wrapper {display: grid;grid-gap: 10px;grid-template-columns: 120px 120px 120px;grid-template-areas:. header headersidebar content content;background-color: #fff;color: #444;
}.sidebar {grid-area: sidebar;
}.content {grid-area: content;
}.header {grid-area: header;
}上面代码表示划分出6个单元格其中值得注意的是 . 符号代表空的单元格也就是没有用到该单元格 以上代码表示将类.sidebar .content .header所在的元素放在上面grid-template-areas中定义的sidedar content header区域中 5、grid-auto-flow属性
①、语法
grid-auto-flow 属性控制着自动布局算法怎样运作精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是先行后列即先填满第一行再开始放入第二行即下图英文数字的顺序 one,two,three…。这个顺序由 grid-auto-flow 属性决定默认值是 row
.wrapper {display: grid;grid-template-columns: 100px 200px 100px;grid-auto-flow: row;grid-gap: 5px;grid-auto-rows: 50px;
}②、属性值
grid-auto-flowrow表示根据实际情况排列可能会存在空白等情况grid-auto-flowrow dense表示尽可能填满表格下面存在长度合适的就会去填满上面的空白grid-auto-flowcolumn表示先列后行。就是按照顺序竖着排一列排满就去排第二列依次类推
6、justify-items属性、align-items属性、place-items属性
①、语法
justify-items属性设置单元格内容的水平位置左中右align-items属性设置单元格的垂直位置上中下 下面以justify-items属性为例进行讲解align-items属性同理只是方向为垂直方向。二者都有如下属性 .container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
}②、属性值
start对齐单元格的起始边缘end对齐单元格的结束边缘center单元格内部居中stretch拉伸占满单元格的整个宽度默认值
7、justify-content属性、align-content属性、place-content属性
①、语法
justify-content属性是整个内容区域在容器里面的水平位置左中右align-content属性是整个内容区域的垂直位置上中下 下面以justify-content属性为例进行讲解align-content属性同理只是方向为垂直方向 .container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}②、属性值
start 对齐容器的起始边框end 对齐容器的结束边框center 容器内部居中space-around 每个项目两侧的间隔相等。所以项目之间的间隔比项目与容器边框的间隔大一倍space-between 项目与项目的间隔相等项目与容器边框之间没有间隔space-evenly 项目与项目的间隔相等项目与容器边框之间也是同样长度的间隔stretch 项目大小没有指定时拉伸占据整个网格容器
8、grid-auto-columns属性、grid-auto-rows属性 在将grid-auto-columns属性和grid-auto-rows属性之前,先来看看隐式和显式网格的概念 **隐式和显式网格**显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西或者因为内容的数量而需要的更多网格轨道的时候网格将会在隐式网格中创建行和列 假如有多余的网格也就是上面提到的隐式网格那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性浏览器完全根据单元格内容的大小决定新增网格的列宽和行高 四、项目属性
1、grid-column-start属性、grid-column-end 属性
grid-column-start 属性左边框所在的垂直网格线grid-column-end 属性右边框所在的垂直网格线
2、grid-row-start属性、grid-row-end 属性
grid-row-start 属性上边框所在的水平网格线grid-row-end 属性下边框所在的水平网格线
3、justify-self 属性、align-self 属性、place-self 属性
①、语法
justify-self 属性设置单元格内容的水平位置左中右跟 justify-items 属性的用法完全一致但只作用于单个项目align-self 属性设置单元格内容的垂直位置上中下跟align-items属性的用法完全一致也是只作用于单个项目 两者很相像这里只拿 justify-self 属性演示align-self 属性同理只是作用于垂直方向。place-self 是设置。align-self 和 justify-self 的简写形式这里也不重复介绍。 .item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}②、属性值
start对齐单元格的起始边缘end对齐单元格的结束边缘center单元格内部居中stretch拉伸占满单元格的整个宽度默认值
五、应用场景
fr 实现等分响应式repeat auto-fit——固定列宽改变列数量repeatauto-fitminmax 去掉右侧空白repeatauto-fitminmax-span-dense 解决空缺问题
六、Grid布局和flex布局二者区别
flex布局是一维布局。一次只能处理一个维度上的元素布局一行或者一列Grid是二维布局。可以同时处理行和列
七、总结
通过使用CSS-Grid可以创建复杂的布局如响应式的多列网格、媒体查询、网格项的自适应大小和位置等。CSS-Grid通过定义网格行和列来组织内容并使用网格容器和网格项将内容放置在网格中。CSS-Grid的主要优点是它提供了更灵活的布局选项比如可以定义不同的网格行和列的大小和位置而且不需要使用复杂的浮动和定位技术。
