小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
继续上一次分享，上一次分享介绍我们如何定义每一个 item 起始轴编号和终止轴编号来定义一个 item 宽度或者高度。
index.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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
background-color:lemonchiffon;
}
.container div{
font-size: 2em;
color: white;
}
.container :nth-child(1){
background-color:burlywood;
}
.container :nth-child(2){
background-color: violet;
}
.container :nth-child(3){
background-color: tomato;
}
.container :nth-child(4){
background-color: teal;
}
.container{
height: 100vh;
display: grid;
grid-gap: 5px;
grid-template-columns:1fr 5fr;
grid-template-rows: 40px auto 40px;
}
.header{
grid-column: 1 / 3;
}
.footer{
grid-column: 1 / 3;
}
.menu{
}
.content{
grid-column: 2 / 3;
}
之前我们已经介绍过来了，这里有 3 个轴将内容划分为两个区域，如下图，然后我们通过定义起始轴和终止轴来定义 cell 的显示的区域。
grid-template-columns:1fr [content-start] 5fr [content-end];
这里内容之间位置就是假设有一条轴，我们可以个每一个轴起一个名称，轴的名称需要用方括号括上，名字有中划线连接。
.content{
grid-column: content-start / content-end;
}
grid-template-columns:[main-start]1fr [content-start] 5fr [content-end main-end];
同理也可以为第一条轴设置为 main-start 然后将第三条轴设置为 main-end。为什么设置为 content-start 中划线连接符的形式，开始用start 终止用 end。接下里大家可以看到为什么要这样处理了。
.content{
grid-column: content;
}
我们可以为 grid-column 指定值为 content 然后就会自动根据 content 识别为 content-start 和 content-end。
.container{
height: 100vh;
display: grid;
grid-gap: 5px;
grid-template-columns:[main-start]1fr [content-start] 5fr [content-end main-end];
grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end];
}
justify-content 和 align-content
<!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="style.css">
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
.container{
border: 2px solid black;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(2,100px);
height: 100vh;
}
.box{
line-height: 100px;
font-size: 1.75em;
color: white;
text-align: center;
}
.box:nth-child(1),.box:nth-child(4){
background-color: aquamarine;
}
.box:nth-child(2),.box:nth-child(5){
background-color:orchid;
}
.box:nth-child(3),.box:nth-child(6){
background-color:khaki;
}
justify-content: end;
通过设置 justify-content 可以设置项目 items 整体对齐的效果，是整体靠右侧还是左侧。
justify-content: end;//start or center
justify-content: center;
align-content: end;
justify-content: space-around;
下面通过图解释一下 3 种不同空间间隔，其中可能需要解释的就是 space-evenly 和 space-around
justify-items align-items justify-self align-self
<body>
<div class="container">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
background-color:lemonchiffon;
}
.container div{
font-size: 2em;
color: white;
}
.container :nth-child(1){
background-color:burlywood;
}
.container :nth-child(2){
background-color: violet;
}
.container :nth-child(3){
background-color: tomato;
}
.container :nth-child(4){
background-color: teal;
}
.container{
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12,1fr);
grid-template-rows: 50px 200px 50px;
}
.header{
grid-column: 1/-1;
}
.footer{
grid-column: 1/-1;
}
.menu{
grid-column: 1/3;
}
.content{
grid-column: 3/-1;
}
justify-items: center;
align-items: center;
可以单独对于 item 进行调整
.content{
grid-column: 3/-1;
align-self: center;
justify-self: center;
}
