目录
一、grid布局
1.1认识gird布局
网格是一组相交的水平线和垂直线,它定义了网格的列和行。
CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。
以下是一个简单的网页布局,使用了网格布局,包含六列和三行。
1.2grid布局重要概念
二、网格容器常见属性
2.1grid-template-columns 属性
grid-template-columns 属性定义了网格布局中的列的数量,它也可以设置每个列的宽度。
属性值是一个以空格分隔的列表,其中每个值定义相对应列的宽度。
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
2.2grid-template-rows 属性
grid-template-rows 属性设置每一行的高度。
属性值是一个以空格分隔的列表,其中每个值定义相对应行的高度:
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
2.3justify-content 属性
justify-content 属性用于对齐容器内的网格,设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
注意:网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。
.grid-container {
display: grid;
justify-content: space-around;
}
2.4align-content 属性
align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。
注意:网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
三、网格元素常见属性
3.1grid-column 属性
grid-column 属性定义了网格元素列的开始和结束位置。
注意: grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。
我们可以参考行号来设置网格元素,也可以使用关键字 "span" 来定义元素将跨越的列数。
.item1 {
grid-column: 1 / 5;
}
.item1 {
grid-column: span 2;
}
3.2grid-row 属性
grid-row 属性定义了网格元素行的开始和结束位置。
注意: grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。
我们可以参考行号来设置网格元素,也可以使用关键字 "span" 来定义元素将跨越的行数。
3.3align-content 属性
grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。
以下实例设置 "item8" 从第 1 行开始和第 2 列开始, 第 5 行和第 6 列结束。
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
3.4网格元素命名
grid-area 属性可以对网格元素进行命名。
命名的网格元素可以通过容器的 grid-template-areas 属性来引用。
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
进行布局
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</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>
</head>
<style>
.container{
width: 100vw;
height: 100vh;
background-color: skyblue;
display: grid;
/* 设置行数和行高 */
/* grid-template-rows: 100px 100px 200px; */
/* 新的单位fr 剩余空间的分配比例 */
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
/* 设置列数和列宽 */
/* grid-template-columns: 200px 200px 200px; */
/* item之间的间距 */
/* gap: 10px; */
row-gap:10px ;
column-gap: 10px;
}
.item{
border: 1px orange solid;
box-sizing: border-box;
background-color: tomato;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: aliceblue;
}
.one{
/* 跨列合并 */
/*grid-column:start/end 或者 span 2 合并2个 */
grid-column: 2/span 2;
}
.two{
/* 跨行合并 */
grid-row: span 2;
}
.area{
grid-area: span 2 / span 2;
}
</style>
<body>
<div class="container">
<div class="item ">1</div>
<div class="item one">2</div>
<!-- <div class="item">3</div> -->
<div class="item two">4</div>
<div class="item area">5</div>
<!-- <div class="item">6</div> -->
<div class="item">7</div>
<!-- <div class="item">8</div> -->
<!-- <div class="item">9</div> -->
<!-- <div class="item">10</div> -->
<div class="item">11</div>
<div class="item">12</div>
</div>
</body>
</html>