CSS Grid 布局

1. Grid Introduction

CSS Grid (网格布局) is CSS3引入 一种二维布局system, 用于同时processing行 and 列 布局. 它providing了一种更强 big , 更flexible 方式来design complex 网页布局, 解决了传统布局method 许 many 限制.

1.1 Grid basicconcepts

Grid布局由两个主要部group成:

1. Gridcontainers (Grid Container) : 设置了display: grid or display: inline-grid 元素, 它 所 has 直接子元素都会成 for Gridproject.
2. Gridproject (Grid Item) : Gridcontainers 直接子元素, 它们会按照Grid规则for排列.

<div class="grid-container">  
    <div class="grid-item">1</div>  
    <div class="grid-item">2</div>  
    <div class="grid-item">3</div>  
    <div class="grid-item">4</div>  
</div>

.grid-container {
    display: grid; /* 将containers设置 for Gridcontainers */
    grid-template-columns: 1fr 1fr; /* 定义2列, 每列宽度相etc. */
    grid-template-rows: 100px 100px; /* 定义2行, 每行 high 度100px */
    gap: 10px; /* 设置project之间 间距 */
}

2. Gridcontainersproperty

Gridcontainers has 以 under 主要property:

2.1 display

用于将元素定义 for Gridcontainers.

/* 将元素设置 for 块级Gridcontainers */
.grid-container {
    display: grid;
}

/* 将元素设置 for  in 联Gridcontainers */
.grid-container {
    display: inline-grid;
}

2.2 grid-template-columns and grid-template-rows

用于定义Gridcontainers 列 and 行 big small .

/* 定义3列, 宽度分别 for 200px, 1fr and 1fr */
.grid-container {
    grid-template-columns: 200px 1fr 1fr;
}

/* 定义2行,  high 度分别 for 100px and auto */
.grid-container {
    grid-template-rows: 100px auto;
}

/* usingrepeat()function简化重复值 */
.grid-container {
    grid-template-columns: repeat(3, 1fr); /* etc.同于1fr 1fr 1fr */
    grid-template-rows: repeat(2, 100px); /* etc.同于100px 100px */
}

/* usingminmax()function定义最 small 值 and 最 big 值 */
.grid-container {
    grid-template-columns: minmax(100px, 1fr) 1fr 1fr;
}

/* usingauto-fill and auto-fit自动填充 */
.grid-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

2.3 grid-template-areas

用于定义Grid区域, through命名区域来creation complex 布局.

/* 定义Grid区域 */
.grid-container {
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 100px auto 100px;
}

/*  for Gridproject分配区域 */
.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

.grid-container {
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 80px 200px 80px;
}

.grid-item:nth-child(1) { grid-area: header; background-color: #34A853; }
.grid-item:nth-child(2) { grid-area: sidebar; background-color: #FBBC05; }
.grid-item:nth-child(3) { grid-area: main; background-color: #4285F4; }
.grid-item:nth-child(4) { grid-area: footer; background-color: #EA4335; }

2.4 grid-template

grid-template is grid-template-columns, grid-template-rows and grid-template-areas 简写property.

/* 语法: grid-template: grid-template-rows / grid-template-columns / grid-template-areas; */
.grid-container {
    grid-template: 
        "header header header" 100px
        "sidebar main main" auto
        "footer footer footer" 100px
        / 200px 1fr 1fr;
}

2.5 gap, column-gap, row-gap

用于定义Gridproject之间 间距.

/* 设置project之间 间距 (行 and 列间距相同)  */
.grid-container {
    gap: 20px;
}

/* 设置列间距 */
.grid-container {
    column-gap: 30px;
}

/* 设置行间距 */
.grid-container {
    row-gap: 15px;
}

/* 同时设置行 and 列间距 */
.grid-container {
    gap: 15px 30px; /* 行间距 列间距 */
}

2.6 justify-items and align-items

用于定义Gridproject in 其网格区域 in for 齐方式.

/* 水平 for 齐方式 */
.grid-container {
    justify-items: start; /*  left  for 齐 */
    justify-items: end; /*  right  for 齐 */
    justify-items: center; /* 居in for 齐 */
    justify-items: stretch; /* 拉伸填满 (默认)  */
}

/* 垂直 for 齐方式 */
.grid-container {
    align-items: start; /* 顶部 for 齐 */
    align-items: end; /* 底部 for 齐 */
    align-items: center; /* 居in for 齐 */
    align-items: stretch; /* 拉伸填满 (默认)  */
    align-items: baseline; /* 基线 for 齐 */
}

2.7 justify-content and align-content

用于定义Gridcontainers in Gridproject整体 for 齐方式, 当Gridcontainers big small big 于Gridproject 总 big small 时生效.

/* 水平 for 齐方式 */
.grid-container {
    justify-content: start; /*  left  for 齐 */
    justify-content: end; /*  right  for 齐 */
    justify-content: center; /* 居in for 齐 */
    justify-content: space-between; /* 两端 for 齐, project之间间隔相etc. */
    justify-content: space-around; /* project两侧间隔相etc. */
    justify-content: space-evenly; /* 所 has 间隔相etc. */
}

/* 垂直 for 齐方式 */
.grid-container {
    align-content: start; /* 顶部 for 齐 */
    align-content: end; /* 底部 for 齐 */
    align-content: center; /* 居in for 齐 */
    align-content: space-between; /* 两端 for 齐, project之间间隔相etc. */
    align-content: space-around; /* project两侧间隔相etc. */
    align-content: space-evenly; /* 所 has 间隔相etc. */
    align-content: stretch; /* 拉伸填满 (默认)  */
}

2.8 grid-auto-columns and grid-auto-rows

用于定义Gridcontainersin自动生成 网格轨道 (隐式网格) big small .

/* 定义自动生成 列宽 */
.grid-container {
    grid-auto-columns: 100px;
}

/* 定义自动生成 行 high  */
.grid-container {
    grid-auto-rows: 150px;
}

2.9 grid-auto-flow

用于定义Gridproject 排列顺序.

/* 默认值, 按行排列, 填满一行 after 换行 */
.grid-container {
    grid-auto-flow: row;
}

/* 按列排列, 填满一列 after 换列 */
.grid-container {
    grid-auto-flow: column;
}

/* 自动填充行 or 列in 空白区域 */
.grid-container {
    grid-auto-flow: row dense;
    grid-auto-flow: column dense;
}

2.10 place-items

place-items is align-items and justify-items 简写property.

/* 语法: place-items: align-items justify-items; */
.grid-container {
    place-items: center start;
    place-items: center; /* 两者都 for center */
}

2.11 place-content

place-content is align-content and justify-content 简写property.

/* 语法: place-content: align-content justify-content; */
.grid-container {
    place-content: center start;
    place-content: center; /* 两者都 for center */
}

3. Gridprojectproperty

Gridproject has 以 under 主要property:

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

用于定义Gridproject in Gridcontainersin 位置, through指定project占据 网格线来确定.

/* 语法 */
.grid-item {
    grid-column-start: 1; /* 起始列网格线 */
    grid-column-end: 3; /* 结束列网格线 */
    grid-row-start: 1; /* 起始行网格线 */
    grid-row-end: 2; /* 结束行网格线 */
}

/* usingspan关键字 */
.grid-item {
    grid-column-start: span 2; /* 跨越2列 */
    grid-row-start: span 3; /* 跨越3行 */
}

.grid-item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
}

.grid-item:nth-child(2) {
    grid-row-start: 2;
    grid-row-end: 4;
}

.grid-item:nth-child(5) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}

3.2 grid-column and grid-row

grid-column is grid-column-start and grid-column-end 简写property; grid-row is grid-row-start and grid-row-end 简写property.

/* 语法: grid-column: start / end; */
.grid-item {
    grid-column: 1 / 3; /* etc.同于 grid-column-start: 1; grid-column-end: 3; */
    grid-row: 1 / 2; /* etc.同于 grid-row-start: 1; grid-row-end: 2; */
}

/* usingspan关键字 */
.grid-item {
    grid-column: 1 / span 2; /*  from 第1列开始, 跨越2列 */
    grid-row: span 3; /* 跨越3行 */
}

3.3 grid-area

用于定义Gridproject 名称, or 者直接指定project 位置.

/* 用于grid-template-areas */
.grid-item {
    grid-area: header;
}

/* 语法: grid-area: row-start / column-start / row-end / column-end; */
.grid-item {
    grid-area: 1 / 1 / 2 / 3; /* etc.同于 grid-row: 1 / 2; grid-column: 1 / 3; */
}

3.4 justify-self and align-self

用于定义单个Gridproject in 其网格区域 in for 齐方式, 会覆盖containers justify-items and align-itemsproperty.

/* 水平 for 齐方式 */
.grid-item {
    justify-self: start;
    justify-self: end;
    justify-self: center;
    justify-self: stretch;
}

/* 垂直 for 齐方式 */
.grid-item {
    align-self: start;
    align-self: end;
    align-self: center;
    align-self: stretch;
    align-self: baseline;
}

3.5 place-self

place-self is align-self and justify-self 简写property.

/* 语法: place-self: align-self justify-self; */
.grid-item {
    place-self: center start;
    place-self: center; /* 两者都 for center */
}

4. common Grid布局模式

4.1 basic网格布局

/* 3列etc.宽网格 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

4.2 response式网格布局

/* response式网格, 根据屏幕宽度自动调整列数 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

4.3 侧edge栏布局

/*  left 侧固定宽度,  right 侧自适应 */
.grid-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    grid-template-rows: 100vh; /* 全屏 high 度 */
}

4.4 圣杯布局

/* 经典圣杯布局: 顶部导航, 底部页脚, in间三栏 */
.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "left main right"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 20px;
}

4.5 卡片网格布局

/* 卡片网格, 每行显示 many 个卡片, 卡片 high 度自适应 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.card p {
    margin-bottom: 20px;
    flex-grow: 1;
}

.card .btn {
    align-self: flex-start;
}

5. Grid and Flexbox 结合using

Grid and Flexbox可以结合using, Grid用于整体页面布局, Flexbox用于局部component布局.

/* 整体页面usingGrid布局 */
.page {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 20px;
}

/* 导航栏usingFlexbox布局 */
.header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #34A853;
    color: white;
    padding: 20px;
}

/* 侧edge栏usingFlexbox布局 */
.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background-color: #FBBC05;
    padding: 20px;
}

/* 主 in 容区usingGrid布局 */
.main {
    grid-area: main;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* 卡片 in 部usingFlexbox布局 */
.card {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* 页脚usingFlexbox布局 */
.footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EA4335;
    color: white;
    padding: 20px;
}

6. 练习