css之grid布局
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
Grid 布局远比 Flex 布局强大。
基本概念
- 网格容器：采用网格布局的区域，称为"容器"（container）。通过设置display: grid或display: inline-grid定义容器，其直接子元素成为网格项目。
- 网格项目：容器内部采用网格定位的子元素，称为"项目"（item）
- 网格区域：通过grid-template-areas命名单元格组合区域，实现复杂布局
- 网格轨道：由grid-template-columns和grid-template-rows定义的行和列，支持固定值（如px）、百分比（%）及弹性单位（fr）。容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
- 网格线：隐含的垂直线和水平线，用于定位项目（如grid-column: 1/3表示跨越第1至3条垂直线）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线。
grid-template-columns、grid-template-rows
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
grid-template-columns: 280px auto;
grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);
有时单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
grid-template-columns: repeat(auto-fill, 100px);
fr单位被用于在一系列长度值中分配剩余空间，如果已指定其它部分，则剩下的空间根据各自的数字按比例分配。
grid-template-columns: 150px 1fr 2fr;
minmax(min, max)：用来定义一个范围，最小值为min，最大值为max
`grid-template-columns: 40px 50px minmax(50px, 2fr) 1fr 40px;
grid-template-areas
grid-template-areas 属性用于定义区域，如果某些区域不需要利用，则使用"点"（.）表示
grid-gap、grid-row-gap、grid-column-gap
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
grid-gap: 10px;
grid-gap: 10px 10px;
grid-column-gap: 10px;grid-row-gap: 10px;
grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列" ，row dense和column dense这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
grid-auto-flow: row | column | row dense | column dense
justify-content、align-content
justify-content属性是整个内容区域在容器里面的水平位置，align-content属性是整个内容区域的垂直位置。
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
justify-items、align-items
justify-items属性设置单元格内容的水平位置，align-items属性设置单元格内容的垂直位置 。
align-items: start | end | center | stretch;
justify-items: start | end | center | stretch;
stretch：拉伸，占满单元格的整个宽度（默认值）
grid-area、grid-row、grid-column
grid-area属性指定项目放在哪一个区域。数字代表第n条网格线。
grid-area: logo;
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-area: 2/ 1 / 4 / 2;
grid-row: 2 / 4; 等同于
grid-row: 2 / span 2;
grid-row-start: 2; grid-row-end: 4;
grid-column: 1 / 2; 等同于
grid-column-start: 1; grid-column-end: 2;
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
justify-self、align-self
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
简单布局
<style>
.parent {
display: grid;
grid-template-columns: 25% 75%;
/* grid-template-columns: 1fr 3fr; */ /* 同上 */
height: 100px;
}
.child {
border: 1px solid red;
}
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: 1fr 3fr;
height: 100px;
gap: 10px;
}
.child {
border: 1px solid red;
}
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 20px 1fr;
border: 1px solid silver;
gap: 10px;
height: 100px;
}
.child {
border: 1px solid red;
}
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 20px 20px;
grid-auto-flow: column;
}
.item {
font-size: 4em;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
}
.item-2 {
background-color: #f68f26;
}
.item-3 {
background-color: #4ba946;
}
.item-4 {
background-color: #0376c2;
}
.item-5 {
background-color: #c077af;
}
.item-6 {
background-color: #f8d29d;
}
</style>
</head>
<body>
<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
</body>
</html>
常用网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
height: auto;
}
.container {
min-height: 100vh;
height: auto;
display: grid;
grid-template-columns: 280px auto;
grid-template-rows: 50px auto 25px;
grid-template-areas:
"logo header"
"sidebar main"
". footer";
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: stretch;
align-content: stretch;
}
.container > div {
border: 1px solid silver;
}
.logo {
grid-area: logo;
}
.header {
grid-area: header;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">logo</div>
<div class="header">header</div>
<div class="sidebar">sidebar</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
height: auto;
}
.container {
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: auto 200px;
grid-template-rows: 60px auto;
grid-template-areas: "nav ." "content sidebar";
gap: 20px 20px;
}
.navbar {
grid-row: 1 / 1;
grid-column: 1 / 3;
border: 1px silver solid;
}
.content {
grid-area: content;
border: 1px silver solid;
}
.sidebar {
grid-area: "sidebar";
border: 1px silver solid;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">navbar</div>
<div class="content">content</div>
<div class="sidebar">sidebar</div>
</div>
</body>
</html>
网格布局日历
<style>
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.25rem;
width: 14.5rem;
}
.day {
border: 1px solid silver;
height: 2rem;
width: 2rem;
line-height: 2rem;
text-align: center;
}
</style>
<div class="calendar">
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">31</div>
</div>
浙公网安备 33010602011771号