一个htnl搞定css的Grid布局零基础教程
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.item {
border: 1px solid red;
/* 设置边框宽度、样式和颜色 */
}
.box {
/* 设置容器布局为grid布局 */
display: grid;
/* 指定每一行的宽,空格表示换行*/
grid-template-rows: 100px 250px;
/* 指定每一列的宽,空格表示换列*/
grid-template-columns: 100px 200px 400px;
}
.box2 {
width: 150px;
height: 250px;
;
/* 设置容器布局为grid布局 */
display: grid;
/* 指定每一行的宽高,空格表示换行*/
grid-template-rows: 30% 30% 30%;
/* 指定每一列的宽度,空格表示换列*/
grid-template-columns: 30% 30% 30%;
}
.box3 {
width: 150px;
height: 250px;
;
/* 设置容器布局为grid布局 */
display: grid;
/* 行宽.指定第一行200px,第二行占剩下的3分之1,第三行占剩下的3分之2*/
grid-template-rows: 20px 1fr 2fr;
/* 列宽.指定第一列50px,第二列占剩下的3分之1,第三列占剩下的3分之2*/
grid-template-columns: 50px 1fr 2fr;
}
.box4 {
width: 800px;
height: 500px;
border: 1px solid blue;
display: grid;
/* 行宽.分成三份,简写repeat(3, 33.33%) */
grid-template-rows: repeat(3, 100px);
/* 列宽. 行宽.分成四份,简写repeat(4, 33.33%) */
grid-template-columns: repeat(4, 100px);
/*justify-contentd的
start 左对齐(默认),
center:中对齐,
end:右对齐方式
space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
space-between div内两端对齐,靠弄两边
space-evenly 匀称对齐,每个间距一样
*/
justify-content: space-evenly;
/*
上下方向的对齐
start 左对齐(默认),
center:中对齐,
end:右对齐方式
space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
space-between div内两端对齐,靠弄两边
space-evenly 匀称对齐,每个间距一样 */
align-content: space-evenly;
}
.box5 {
width: 800px;
height: 500px;
border: 1px solid blue;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(4, 100px);
justify-content: start;
align-content: start;
/* 行 列 间距 */
gap: 20px 20px;
}
.box6 {
height: 500px;
border: 1px solid blue;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
justify-content: start;
align-content: start;
/* 行 列 间距 */
gap: 20px 20px;
}
/*
1_____2____3____4
实现圣杯布局, | |头部| |
2|_____|____|____|
|中左,|中间,|中右|
3|_____|____|____|
| |底部| |
4|_____|____|____|
*/
.box7 {
width: 100%;
height: 800px;
border: 1px solid blue;
display: grid;
/* 设置三行,第一行200px 第二行自动占满(总高800,所以剩下600全占) 第三行200px */
grid-template-rows: 200px auto 200px;
/* 设置三列 第一列 20% 第二列自动 第三列20% */
grid-template-columns: 200px auto 200px;
/* gap: 10px 10px; */
}
/* 网格线属性是给子组件设置的,就是数从1开始数到几根线,就占到几根 */
/* 设置头和底部都占4根线位置
grid-column-start 行左边1开始
grid-column-end 行右边1开始
grid-row-start 列上边1开始
grid-row-end 行下变1开始
*/
.x,
.t {
/* grid-column-start: 1;
grid-column-end: 4; */
/* 简写 */
grid-column: 1/4;
}
.box8 {
width: 500px;
/* width: 100%; */
height: 800px;
border: 1px solid blue;
display: grid;
/* 分成两行三列 */
grid-template-columns: 200px repeat(2, auto);
/* 分成两行三列 */
grid-template-rows: repeat(2, auto);
gap: 10px 10px;
}
.t8 {
/* 列一共4根线,头占1开始3结束 */
grid-column: 1/3;
}
.y8 {
/* 右边从3开始4结束 */
/* grid-column-start: 3;
grid-column-end: 3; */
grid-column: 3/4;
/* 然后行从1开始3结束 */
/* grid-row-start: 1;
grid-row-end: 3; */
grid-row: 1/3;
}
.box10 {
width: 500px;
height: 800px;
border: 1px solid blue;
display: grid;
/* 分成两行三列 */
grid-template-columns: repeat(3, auto);
/* 分成两行三列 */
grid-template-rows: repeat(3, auto);
/* 定义每个各自的区域,通过定义名称来玩 */
/* 可以写几个,就能占几个 */
/* . 表示这个区域不属于任何单元格 */
grid-template-areas: 'a a c'
'd e f'
'. h m';
gap: 10px 10px;
}
.item101 {
grid-area: a;
}
.item102 {
grid-area: b;
}
.item103 {
grid-area: c;
}
.item104 {
grid-area: d;
}
.item105 {
grid-area: e;
}
.item106 {
grid-area: f;
}
.item107 {
grid-area: g;
}
.item108 {
grid-area: h;
}
.item109 {
grid-area: m;
}
.box9 {
width: 800px;
height: 800px;
border: 1px solid blue;
display: grid;
/* 分成两行三列 */
grid-template-columns: 200px auto 200px;
/* 分成两行三列 */
grid-template-rows: 100px 400px 100px;
/* gap: 10px 10px; */
grid-template-areas: 'q q q'
'z x y'
'p1 p1 p1';
}
.t9 {
grid-area: q;
}
.z9 {
grid-area: z;
}
.x9 {
grid-area: x;
}
.y9 {
grid-area: y;
}
.o9 {
grid-area: p1;
}
.box11 {
width: 800px;
height: 800px;
border: 1px solid blue;
display: grid;
/* 分成8列 */
grid-template-columns: repeat(8, 1fr);
/* 分成3行 */
grid-template-rows: repeat(3, auto);
grid-template-areas: 'a11 a11 a11 a11 a11 a11 a11 a11'
'b11 c11 c11 c11 c11 c11 d11 d11'
'e11 e11 e11 e11 e11 e11 e11 e11';
gap: 10px 10px;
}
.a11 {
grid-area: a11;
}
.b11 {
grid-area: b11;
}
.c11 {
grid-area: c11;
}
.d11 {
grid-area: d11;
}
.e11 {
grid-area: e11;
}
/* 浏览器宽度小于600px,使用一下布局,自动切换响应式 */
@media (max-width:600px) {
.box11 {
grid-template-areas: 'a11 a11 a11 a11 b11 b11 b11 b11'
'c11 c11 c11 c11 d11 d11 d11 d11'
'e11 e11 e11 e11 e11 e11 e11 e11';
gap: 10px 10px;
}
}
.box12 {
/* 边距 */
padding: 30px;
margin: 0;
/* 大小 */
width: 800px;
height: 800px;
border: 1px solid blue;
display: grid;
/* 分成5列 */
grid-template-columns: repeat(4, 1fr);
/* 分成两行5行 */
grid-template-rows: repeat(5, auto);
/* 间距 */
gap: 10px 10px;
}
.item12 {
font-size: 40px;
/* 圆角阴影效果 */
border-radius: 6px;
box-shadow: 3px 3px 9px #828282, -3px -3px 9px #fff;
}
/* 获取第几个子组件 */
.box12 .item12:nth-child(8) {
grid-row: 2/4;
grid-column: 4/5;
}
.box12 .item12:nth-child(15) {
grid-row: 4/6;
grid-column: 4/5;
}
.box12 .item12:nth-child(16) {
grid-row: 5/6;
grid-column: 1/3;
}
.box13 {
/* 边距 */
/* 大小 */
width: 800px;
height: 800px;
border: 1px solid blue;
}
/* 头部 */
.box13 .tou13 {
/* 边缘自动 */
margin: auto;
/* 整个头背景颜色 */
background-color: #f7f7f7;
/* 设置边框10px */
padding: 10px;
}
.box13 .tou13 ul {
/* 格子的背景颜色 */
background-color: #fff;
display: grid;
/* 分成5列 */
grid-template-columns: repeat(8, 1fr);
/* 分成两行3行 */
grid-template-rows: repeat(3, auto);
/* 均匀浮动上下左右居中 */
justify-content: space-evenly;
align-content: space-evenly;
/* 格子间距 */
gap: 4px 10px;
}
/* 图片部分 */
.box13 .zhong13 {
/* 边缘自动 */
margin: auto;
/* 整个头背景颜色 */
background-color: #f7f7f7;
/* 设置边框10px */
padding: 10px;
}
.box13 .zhong13 .ul13 {
/* 格子的背景颜色 */
background-color: #fff;
display: grid;
/* 分成6列 */
grid-template-columns: repeat(6, auto);
/* 分成两行2行 */
grid-template-rows: repeat(2, auto);
}
.box13 .zhong13 .ul13 .img {
display: grid;
justify-content: center;
align-items: center;
}
.box13 .zhong13 .ul13 .img img {
width: 100%;
height: 100%;
/* 防止图片变形 */
object-fit: cover;
/* margin-left: -152px; */
}
style>
head>
<body>
<div class="box">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
div>
<hr />
总宽150,高250
/* 指定每一行的宽高,空格表示换行*/
/* 指定每一列的宽度,空格表示换列*/
<div class="box2">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">3div>
<div class="item">3div>
<div class="item">3div>
<div class="item">3div>
div>
<hr />
/* 行宽.指定第一行200px,第二行占剩下的3分之1,第三行占剩下的3分之2*/
/* 列宽.指定第一列50px,第二列占剩下的3分之1,第三列占剩下的3分之2*/
<div class="box3">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
<div class="item">5div>
<div class="item">6div>
<div class="item">7div>
div>
<hr />
/* 行宽.分成三份,简写repeat(3, 33.33%) */
<br />
/* 列宽. 行宽.分成四份,简写repeat(4, 33.33%) */
<br />
<div>
<pre>
/*justify-contentd的
start 左对齐(默认),
center:中对齐,
end:右对齐方式
space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
space-between div内两端对齐,靠弄两边
space-evenly 匀称对齐,每个间距一样
*/
/* start 左对齐(默认),
center:中对齐,
end:右对齐方式
space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
space-between div内两端对齐,靠弄两边
space-evenly 匀称对齐,每个间距一样 */ */
pre>
div>
<div class="box4">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
<div class="item">5div>
<div class="item">6div>
<div class="item">7div>
div>
<br />
/* 行 列 间距 */
<div class="box5">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
<div class="item">5div>
<div class="item">6div>
<div class="item">7div>
div>
<br>
自动填充,设置内部div的每个宽度自动填充,一行数量,auto-fill自动填充容纳更多的内部小div
grid-template-columns: repeat(auto-fill, 100px);
<div class="box6">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
<div class="item">5div>
<div class="item">6div>
<div class="item">6div>
<div class="item">6div>
<div class="item">6div>
<div class="item">6div>
<div class="item">6div>
<div class="item">6div>
<div class="item">6div>
<div class="item">7div>
div>
<br>
(重要:<span style="color:red"> 网格线来实现圣杯布局span>)网格线属性是给子组件设置的
<pre>
1_____2____3____4
实现圣杯布局, | |头部| |
2|_____|____|____|
|中左,|中间,|中右|
3|_____|____|____|
| |底部| |
4|_____|____|____|
设置如下图 .x,.t {
grid-column-start: 1;
grid-column-end: 4;
}
/* 网格线属性是给子组件设置的,就是数从1开始数到几根线,就占到几根 */
/* 设置头和底部都占4根线位置 如上图:所示的线如何来数嘛
grid-column-start 行左边1开始
grid-column-end 行右边1开始
grid-row-start 列上边1开始
grid-row-end 行下变1开始
*/
pre>
<div class="box7">
<div class="item t">头部div>
<div class="item z">中间左div>
<div class="item z">中间中div>
<div class="item z">中间右div>
<div class="item x">底部div>
div>
<br>
<span style="color: blue;">网格线-列子:span>
<pre>
列一共4根线,行一共3根线
/* 列-头部占1开始3结束 */
/* 列-右边-从3开始4结束 */
/* 行-右边-从1开始3结束 */
pre>
<div class="box8">
<div class="item t8">头部div>
<div class="item y8">右边div>
<div class="item z8">中间上div>
<div class="item z8">中间下div>
div>
<br>
对每个子组件的各自设置名称,以此来占用,多余的会挤到末尾
<pre>
/* 定义每个各自的区域,通过定义名称来玩 */
/* 可以写几个,就能占几个 */
/* . 表示这个区域不属于任何单元格 */
grid-template-areas: 'a a c'
'd e f'
'. h m';
在子组件上写:{
grid-area: a;
}
<div class="box10">
<div class="item item101">1div>
<div class="item item102">2div>
<div class="item item104">4div>
<div class="item item103">3div>
<div class="item item105">5div>
<div class="item item106">6div>
<div class="item item107">7div>
<div class="item item108">8div>
<div class="item item109">9div>
div>
<br>
<span style="color: blue;">grid-template-areas-列子:span>
<pre>
pre>
<div class="box9">
<div class="item t9">头部div>
<div class="item z9">中间左div>
<div class="item x9">中间中div>
<div class="item y9">中间右div>
<div class="item o9">底部div>
div>
<br>
<span style="color: blue;">利用grid-template-areas
实现响应式布局,在浏览器宽度小于600px的时候展示另一种风格:span>
<pre>
这是默认的展示: 1_____2____3____4
| 头部 |
2|_______________|
|中左1|中间5|中右2|
3|____|_____|____|
| 底部 |
4|_______________|
浏览器宽度小于600px
的时候展示另一种风格: 1_____2____3____4
| 头部 | 中左 |
2|______|_______|
| 中间 |中右 |
3|____ _|________|
| 底部 |
4|_____________|
pre>
<div class="box11">
<div class="item a11">头部div>
<div class="item b11">中间左div>
<div class="item c11">中间中div>
<div class="item d11">中间右div>
<div class="item e11">底部div>
div>
<br>
<span style="color: blue;">实现计算器布局:span>
<pre>
实现计算器布局
pre>
<div class="box12">
<div class="item12">Num lockdiv>
<div class="item12">/div>
<div class="item12">*div>
<div class="item12">-div>
<div class="item12">7div>
<div class="item12">8div>
<div class="item12">9div>
<div class="item12">+div>
<div class="item12">4div>
<div class="item12">5div>
<div class="item12">6div>
<div class="item12">1div>
<div class="item12">2div>
<div class="item12">3div>
<div class="item12">Enterdiv>
<div class="item12">0div>
<div class="item12">.div>
div>
<br>
<span style="color: blue;">实现列子二:span>
<pre>
实现列子二
pre>
<div class="box13">
<div class="tou13">
<ul>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
<span>首页span>
ul>
div>
<div class="zhong13">
<ul class="ul13">
<div class="img">
<img
src="https://img2.baidu.com/it/u=2941359769,503584803&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=50" />
div>
<div class="img">
<img
src="https://img2.baidu.com/it/u=1762205629,145693024&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" />
div>
<div class="img">
<img
src="https://img2.baidu.com/it/u=528833255,3463981408&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=80" />
div>
<div class="img">
<img
src="https://img0.baidu.com/it/u=3326862823,3285905921&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" />
div>
<div class="img">
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615084358_ueydn.jpg&refer=http%3A%2F%2Fc-" />
div>
<div class="img">
<img src="https://up.enterdesk.com/edpic_source/52/3c/29/523c29856f713017d58de09bbf0484b5.jpg" />
div>
<div class="img">
<img
src="https://img2.baidu.com/it/u=137693477,1335447223&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" />
div>
<div class="img">
<img src="http://pic1.win4000.com/wallpaper/0/593e50a79a928.jpg" />
div>
<div class="img">
<img
src="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1503/29/c5/4572580_1427572893073_mthumb.jpg" />
div>
<div class="img">
<img src="http://pic1.win4000.com/mobile/2020-07-10/5f081765b3c10.jpg" />
div>
<div class="img">
<img src="http://pic1.win4000.com/wallpaper/b/571f216dde81f.jpg" />
div>
<div class="img">
<img src="https://up.enterdesk.com/edpic_source/0c/4a/0f/0c4a0fa2b1ad5f62a8c8bcdc3a790198.jpg" />
div>
ul>
div>
div>
body>
html>
如图:
