
批改狀態(tài):合格
老師批語:完成的相當(dāng)出色, 達(dá)到與我們自己的專業(yè)技術(shù)編輯發(fā)文水準(zhǔn)了
Grid
布局初入門Grid
術(shù)語px
像素、%
百分比、fr
自動分配空間比例、auto
自動大小,如圖紅色框就叫軌道;Grid
屬性grid-template-columns
:基于列,創(chuàng)建網(wǎng)格線的名稱和軌道大小,grid-template-rows
:基于行,創(chuàng)建網(wǎng)格線的名稱和軌道大小,100px * 100px
的9個Grid
單元格;html
代碼示例;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-template-areas:
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
grid-template-area
:命名網(wǎng)格區(qū)域名稱,如圖,把9個網(wǎng)格區(qū)域分別命名為 a、b、c、d、e、f、g、h、i;html
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-template-areas:'a b c' 'd e f' 'g h i';
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
Grid
容器 中 子元素數(shù)量超過容器創(chuàng)建的網(wǎng)格時,瀏覽器自動創(chuàng)建網(wǎng)格來放子元素的網(wǎng)格叫隱式網(wǎng)格軌道,如圖;grid-auto-flow:column / rows ;
:隱式網(wǎng)格子元素流動方向即排列順序(默認(rèn)先行后列)如圖;grid-auto-columns:數(shù)值
:設(shè)置隱式網(wǎng)格列寬; grid-auto-rows:數(shù)值
:設(shè)置隱式網(wǎng)格行高;重點:設(shè)置的寬度子元素必須有擴(kuò)展空間否則無效,如圖:gird-column-gap
設(shè)置列間距, grid-row-gap
設(shè)置行間距, grid-gap: 行距 列距
前兩者的簡寫, gap:10px;
超級簡寫列距行距都是10px
,如圖;justify-contens:start / end /cneter
有三個值 開始對齊,結(jié)束對齊,居中對齊 如圖;html
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
/*居中對齊*/
/*justify-content: center;*/
/*從開始的地方對齊*/
/*justify-content: start;*/
/*結(jié)束的地方對齊*/
justify-content: end;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
align-content:start / end / conter ;
三個數(shù)值分別是子元素在父元素中垂直對齊方式,從開始地方,結(jié)束的地方,居中對齊,如圖;html
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
/*從開始的地方對齊*/
/*align-content: start;*/
/*居中對齊*/
/*align-content:center;*/
/*從結(jié)束的地方對齊*/
/*align-content:end;*/
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
place-content: 列 行 ;
:是justify-content
和justify-content:
的縮寫形式;justify-items: stretch / start / cneter / end ;
有四個數(shù)值,拉伸/開始的地方/居中/結(jié)束的地方,在行的方向?qū)R,默認(rèn)會拉伸擴(kuò)展,如圖;html
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
/*所有項目在單元格在拉伸鋪滿*/
/*justify-items: stretch;*/
/*項所有目在單元格水平方向開始的地方對齊*/
/*justify-items:start;*/
/*所有項目在單元格水平方向居中對齊*/
/*justify-items: center;*/
/*所有項目在單元格水平方向在結(jié)束地方對齊*/
justify-items: end;
}
.container > div:first-of-type{
background-color: #55a532;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
aling-items: stretch / start / center / end ;
有四個數(shù)值,拉伸/開始的地方/居中/結(jié)束的地方,在列的方向?qū)R,默認(rèn)會拉伸擴(kuò)展,如圖;html
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
/*所有項目在單元格列的方向拉伸*/
/*align-items: stretch;*/
/*所有項目在單元格列的方向從開始的地方對齊*/
/*align-items: start;*/
/*所有項目在單元格方向居中對齊*/
/*align-items: center;*/
/*所有項目在單元格列方向結(jié)束的地方對齊*/
align-items: end;
}
.container > div:first-of-type{
background-color: #55a532;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
place-items: 列 行
是 justify-items
和align-items
的簡寫模式;grid-column-start:列線號;
開始的列線號;grid-column-end:列線號;
結(jié)束的列線號;grid-column: 開始列線號 / 結(jié)束列線號 ;
,簡寫模式;
grid-row-start:行線號;
開始的行線號;
grid-row-end:行線號;
結(jié)束的行線號;grid-row: 開始行線號 / 結(jié)束行線號;
簡寫模式;html
代碼示例;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
}
.container > div:first-of-type{
background-color: #55a532;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
grid-area: 上 / 左 / 下 / 右 ;
里面的值均為線號;如圖;html
代碼示例;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
}
.container > div:first-of-type{
background-color: #55a532;
grid-area: 1 / 1 / 3 / 3 ;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
grid-area: 區(qū)域名稱;
把項目放在已經(jīng)命名的區(qū)域中,如圖;html
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
grid-template-areas:'a b c' 'd e f' 'g h i';
}
.container > div:first-of-type{
background-color: #55a532;
grid-area: e ;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
justify-self: start / center / end ;
單個項目在單元格中水平方向?qū)R方式,如圖;html
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
}
.container > div:first-of-type{
background-color: #55a532;
/*默認(rèn)方式從開始的地方對齊*/
/*justify-self: start;*/
/*居中對齊*/
/*justify-self: center;*/
/*從結(jié)束的地方對齊*/
justify-self: end;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
align-self: start / center / end ;
單個項目在單元格中 垂直方向的對齊方式,如圖;html
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
}
.container > div:first-of-type{
background-color: #55a532;
/*默認(rèn)方式從開始的地方對齊*/
/*align-self: start;*/
/*居中對齊*/
/*align-self: center;*/
/*從結(jié)束的地方對齊*/
align-self: end;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
place-self:垂直方向 水平方向
單個項目在單元格對齊方式的簡寫,如圖;html
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 布局屬性案例</title>
<style>
* :not(body) {
outline: 1px dashed red;
}
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
}
.container > div:first-of-type{
background-color: #55a532;
/*place-self:垂直方向 水平方向 單個項目在單元格對齊方式的簡寫*/
place-self: center end;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
</html>
grid
和 flex
大致的差不太多,因為都能從大局和細(xì)節(jié)處理和控制每一個元素,所以本質(zhì)上并沒有太多的差別;
grid
屬性命名上容易和flex
記混淆,多寫、多用,靈活運用和穿插應(yīng)用會提高認(rèn)知度;
記憶 justify
是水平方向,align
是垂直方向,排列值為start center end
;
column
是列 row
是行,涉及多行和多列 加s;
content
是容器 item
是項目 self
是自身;
auto
是自動創(chuàng)建的隱式軌道;
所有創(chuàng)建和放置類屬性值前加上類名grid
;
grid
屬性微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號