CSS grid网格布局学习笔记
grid容器
grid子项
定义网格及fr单位
- 示例：
- 参考代码：
- 示例2：
- 代码：
- 示例3：
- 参考代码（fr 比例值）：
- 示例4：
- 参考代码：
合并网格及网格命名
- 参考代码：
.main{
width:300px;
height:300px;
background:skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3";
}
.main div{
background:pink;
border:1px black solid;
box-sizing: border-box;
}
.main div:nth-of-type(1){
grid-area: a1;
}
.main div:nth-of-type(2){
grid-area: a2;
}
.main div:nth-of-type(3){
grid-area: a3;
}
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
- 缩写
- 示例：
网格间隙及简写
示例：
- 参考代码：
/* grid-row-gap: 20px;
grid-column-gap: 30px; */
/* grid-gap: 20px 30px; */
/* row-gap: 20px;
column-gap: 30px; */
gap:20px 30px;网格对齐方式及简写
- 示例：
- 参考代码：
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* justify-items: center;
align-items: center; */
place-items: center center;
}
.main div {
width: 50px;
height: 50px;
background: pink;
}
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>- 整体行与列的排布方式
- 示例：
- 参考代码：
.main2 {
width: 500px;
height: 500px;
background: skyblue;
display: grid;
grid-template-columns: 100px 100px 100p
grid-template-rows: 100px 100px 100px;
/* justify-content: space-evenly;
align-content: end; */
place-content: end space-evenly;
}
.main2 div {
background: pink;
}
<div class="main2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>显示网格和隐式网格
- 示例1：
- 示例2：
基于线的元素放置
- 参考代码：
- 示例2 占两列：
- 参考代码：
- 使用线命名的方式：
- 简写方式：
- 示例：
- 基于区域名称
子项的对齐方式
- 示例：
repeat 与 minmax
- repeat示例：
- minmax示例：
- 根据分辨率自动布局 示例
比定位更加方便的叠加布局
- 示例：
- 参考代码：
<style>
.main {
width: 530px;
height: 300px;
background: skyblue;
display: grid;
}
.main img {
grid-area: 1/1/1/1;
}
.main span {
grid-area: 1/1/1/1;
justify-self: end;
align-self: start;
margin: 5px;
}
.main p {
grid-area: 1/1/1/1;
align-self: end;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.5);
height: 30px;
line-height: 30px;
color: white;
}
</style>
<body>
<div class="main">
<img src="./phone.png" alt="">
<span>自制</span>
<p>手机热卖中.....</p>
</div>
</body>多种组合排列布局
- 代码：
<style>
.main{
width:300px;
height:300px;
background:skyblue;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
gap:5px;
}
.main div{
background:pink;
}
.main div:nth-of-type(1){
/* grid-area: 1/1/span 2/span 2; */
grid-area: 2/1/span 2/span 2;
}
</style>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>栅格布局
- 示例:
<style>
.row{
background:skyblue;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px;
grid-auto-rows: 50px;
}
.row div{
background:pink;
border:1px black solid;
}
.row .col-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-12{
grid-area: auto/auto/auto/span 12;
}
</style>
<body>
<div class="row">
<div class="col-3">2</div>
</div>
</body>容器自适应行列布局
- 示例1
- 参考代码：
.main{
width:300px;
background:skyblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap:5px;
}
.main div{
background:pink;
}- 列的自适应 示例2：
- 参考代码：
.main{
height:300px;
background:skyblue;
display: inline-grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-columns: 100px;
gap:5px;
}综合案例1
- 参考代码：
<!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>
<link rel="stylesheet" href="./reset.css">
<style>
.top{
width:308px;
border:1px #dadadc solid;
margin:20px auto;
}
.top-title{
height:30px;
display: flex;
align-items: center;
margin-left:15px;
font-size:14px;
font-weight: bold;
}
.top-list{
height:352px;
margin: 0 14px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
"a1 a3 a3"
"a2 a3 a3"
"a4 a4 a5"
"a6 a7 a7";
gap:8px;
}
.top-list div:nth-of-type(1){
grid-area: a1;
}
.top-list div:nth-of-type(2){
grid-area: a2;
}
.top-list div:nth-of-type(3){
grid-area: a3;
}
.top-list div:nth-of-type(4){
grid-area: a4;
}
.top-list div:nth-of-type(5){
grid-area: a5;
}
.top-list div:nth-of-type(6){
grid-area: a6;
}
.top-list div:nth-of-type(7){
grid-area: a7;
}
.top-list a{
width:100%;
height:100%;
display: block;
color:white;
line-height: 30px;
}
.top-list h3{
text-align: right;
margin-right:4px;
}
.top-list p{
text-align: center;
}
.top-page{
height:40px;
margin:0 10px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.top-page a{
border:1px #cbcbcb solid;
margin-left:2px;
padding:3px 4px;
}
.top-page span{
padding:3px 4px;
}
.theme1{
background-image: linear-gradient(#187fe6, #32aff2);
border:1px #2a9adc solid;
}
.theme2{
background-image: linear-gradient(#f2246c, #fe5bac);
border:1px #da2061 solid;
}
.theme3{
background-image: linear-gradient(#d46300, #e5ad1c);
border:1px #cd9818 solid;
}
</style>
</head>
<body>
<div class="top">
<div class="top-title">
今日上榜
</div>
<div class="top-list">
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme2">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme3">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme3">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
</div>
<div class="top-page">
<span>1</span>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
</body>
</html>综合案例2
- 示例：
<!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>
<link rel="stylesheet" href="./iconfont.css">
<link rel="stylesheet" href="./reset.css">
<style>
.nav {
width: 233px;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
}
.nav>li {
display: flex;
justify-content: space-between;
align-items: center;
height: 42px;
padding: 0 28px;
cursor: pointer;
color: white;
position: relative;
}
.nav>li a {
color: inherit;
}
.nav>li:hover {
background: #ff6801;
}
.nav>li:hover .nav-menu {
display: grid;
}
.nav-menu {
display: none;
position: absolute;
left: 100%;
top: 0;
height: 460px;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: 305px;
grid-auto-flow: column;
grid-auto-columns: 305px;
background: white;
border: 1px #e1e1e1 solid;
box-shadow: 5px 5px 10px #ccc;
color: #36303c;
}
.nav-menu>li {
display: flex;
align-items: center;
}
.nav-menu>li>img {
margin-left: 26px;
margin-right: 21px;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<div>
<a href="#">手机</a>
<a href="#">电话卡</a>
</div>
<i class="iconfont icon-right-arrow"></i>
<ul class="nav-menu">
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
</ul>
</li>
<li>
<div>
<a href="#">笔记本</a>
<a href="#">显示器</a>
<a href="#">平板</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
<li>
<div>
<a href="#">手机</a>
<a href="#">电话卡</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
<li>
<div>
<a href="#">笔记本</a>
<a href="#">显示器</a>
<a href="#">平板</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
<li>
<div>
<a href="#">手机</a>
<a href="#">电话卡</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
<li>
<div>
<a href="#">笔记本</a>
<a href="#">显示器</a>
<a href="#">平板</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
