grid 布局

什么是grid布局

• grid布局即是网格布局
• grid 布局是一个二维布局

容器属性介绍

display

• display：grid 则该容器是一个块级元素
• display: inline-grid 则容器元素为行内元素

.container {display: grid | inline-grid;
}

grid-template-columns 和 grid-template-rows

1. grid-template-columns 设置列宽
2. grid-template-rows 设置行高
3. repeat() 函数：可以简化重复的值。该函数接受两个参数

• 第一个参数是重复的次数
• 第二个参数是所要重复的值

.container {display: grid;grid-template-columns: 200px 100px 200px; /* 三列 */grid-gap: 5px;grid-template-rows: repeat(2, 50px);  /*  2行，而且行高都为 50px  */
}

• auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。

.container {display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-gap: 5px;grid-auto-rows: 50px;
}

• fr 关键字: 网格容器中可用空间的一等份

.container {display: grid;/* 第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3 */grid-template-columns: 200px 1fr 2fr; grid-gap: 5px;grid-auto-rows: 50px;
}

grid-auto-flow

• grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
• 默认值是 row，先行后列，即先填满第一行，再开始放入第二行
• grid-auto-flow: row dense，表示尽可能填满表格

.container {display: grid;grid-template-columns: 100px 200px 100px;grid-auto-flow: row;grid-gap: 5px;grid-auto-rows: 50px;
}

grid-auto-columns 和 grid-auto-rows

• 显式网格：包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。
• 隐式网格：超出显示网格设置的项目，使用grid-auto-columns 属性和 grid-auto-rows 属性设置

.container {display: grid;grid-template-columns: 200px 100px;
/*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */grid-template-rows: 100px 100px;grid-gap: 10px 20px;grid-auto-rows: 50px;
}

justify-items 和 align-items

• justify-item 设置单元格内容的水平位置（左中右）
• align-items 设置单元格的垂直位置（上中下）

.container {justify-items: start | end | center | stretch;
}.container {align-items: start | end | center | stretch;
}

grid-gap, grid-row-gap, grid-column-gap

• grid-row-gap 设置行间距
• grid-column-gap 设置列间距
• grid-gap 设置行间距和列间距的简写

.container {display: grid;grid-template-columns: 200px 100px 100px;grid-gap: 10px 20px;grid-auto-rows: 50px;
}

项目属性介绍

grid-column-start, grid-column-end, grid-row-start, grid-row-end

• grid-column-start 属性：左边框所在的垂直网格线
• grid-column-end 属性：右边框所在的垂直网格线
• grid-row-start 属性：上边框所在的水平网格线
• grid-row-end 属性：下边框所在的水平网格线

.wrapper {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;grid-auto-rows: minmax(100px, auto);
}.one {grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;background: #f00; 
}.two {grid-column-start: 2;grid-column-end: 4;grid-row-start: 1;grid-row-end: 2;background: #999;
}

grid-area

• grid-area 属性指定项目放在哪一个区域, 配置grid-template-columns使用

<div class="wrapper"><div class="header">div><div class="sidebar">div><div class="content">div>
div>

.wrapper {display: grid;grid-template-columns: repeat(120px, 3);grid-template-areas: "header header header""sidebar content content";background-color: #fff;color: #444;
}.siderbar {grid-area: "sidebar",
}.header {grid-area: "header"
}.content {grid-area: "content";
}

justify-self 属性、align-self 属性以及 place-self 属性

• justify-self: 单元格内容的水平位置（左中右）， 用于单个项目
• align-self: 单元格内容的垂直位置（上中下），用于单个项目
• place-self: align-self和justify-self的简写，用于单个项目

.item {justify-self: start | center | end | stretch;align-self: start | center | end | stretch;
}

.item-1 {justify-self: start;
}.item-2 {justify-self: center;
}.item-3 {justify-self: end;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！