网格简单入门
1.定义网格
display: grid; grid-template-rows: 200px 200px 200px; 行或 1fr 1fr 1fr fr是等分的意思 grid-template-columns: 200px 200px 200px; 列
简写grid-template:行/列 如grid-template:200px 200px 200px/200px 200px 200px;
2.移动网格:利用伪类:nth-child(n)
grid-area: 1/2/2/3 表示区域,前两个是行,后两个是列,表示交换前水平第二个格
在css里添加了
.box:nth-child(6) {
grid-area: 1/2/2/3;
}
6到了2的位置,其余顺序往下排,并不是交换
3.网格命名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>区域命名</title> <style> .contenter { display: grid; /* 第二步,定义网格+ grid-template-areas*/ width: 500px; height: 800px; grid-template-rows: 2fr 3fr 2fr; grid-template-columns: 1fr 3fr 2fr; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; background-color: blue; grid-gap: 5px; } header { /* 第三步,给每个区域添加css样式*/ grid-area: header; background-color: red; } nav { grid-area: nav; background-color: pink; } main { grid-area: main; background-color: yellow; } aside { grid-area: aside; background-color: white; } footer { grid-area: footer; background-color: pink; } </style> </head> <body> <div class="contenter"> <!-- 第一步,把名字以标签的形式写在div --> <header></header> <nav></nav> <main></main> <aside></aside> <footer></footer> </div> </body> </html>