亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 9
粉絲 3
評論 0
訪問量 16272
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
12-30作業(yè)：Grid屬性示例
十年一夢
原創(chuàng)
1412人瀏覽過

Grid 布局初入門

1、Grid 術(shù)語

  • 網(wǎng)格線（Grid lines)：編號，命名，如下圖，實線和虛線都是網(wǎng)格線；

  • 軌道（Grid tracks)：二條線中間的空間，單位 px像素、%百分比、fr 自動分配空間比例、auto自動大小，如圖紅色框就叫軌道；
示例圖

  • 單元格（Grid cell)：四條網(wǎng)格線包裹起來的封閉的空間，如圖，每個紅色框都是單元格；
示例圖

  • 網(wǎng)格區(qū)域（Grid area)：多個單元格形成的矩形區(qū)域，如圖，紅色框就是網(wǎng)格區(qū)域；
示例圖

  • 網(wǎng)格間距（Gird gap)：行或列之間的間隙，如圖，紅色框里 虛線區(qū)域就是網(wǎng)格間距；
示例圖

2、Grid 屬性

2.1 創(chuàng)建顯式軌道；

  • grid-template-columns ：基于列，創(chuàng)建網(wǎng)格線的名稱和軌道大小，
  • grid-template-rows ：基于行，創(chuàng)建網(wǎng)格線的名稱和軌道大小，

    如圖，創(chuàng)建三列三行 大小為100px * 100px 的9個Grid單元格；

示例圖

html代碼示例；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         .container {
  8.             display: grid;
  9.             grid-template-rows: repeat(3, 100px);
  10.             grid-template-columns: repeat(3, 100px);
  11.             grid-template-areas: 
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div class="container">
  17.     <div class="items">1</div>
  18.     <div class="items">2</div>
  19.     <div class="items">3</div>
  20.     <div class="items">4</div>
  21.     <div class="items">5</div>
  22.     <div class="items">6</div>
  23.     <div class="items">7</div>
  24.     <div class="items">8</div>
  25.     <div class="items">9</div>
  26. </div>
  27. </body>
  28. </html>
  • grid-template-area：命名網(wǎng)格區(qū)域名稱，如圖，把9個網(wǎng)格區(qū)域分別命名為 a、b、c、d、e、f、g、h、i；
示例圖

html代碼示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         .container {
  8.             display: grid;
  9.             grid-template-rows: repeat(3, 100px);
  10.             grid-template-columns: repeat(3, 100px);
  11.             grid-template-areas:'a b c' 'd e f' 'g h i';
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div class="container">
  17.     <div class="items">1</div>
  18.     <div class="items">2</div>
  19.     <div class="items">3</div>
  20.     <div class="items">4</div>
  21.     <div class="items">5</div>
  22.     <div class="items">6</div>
  23.     <div class="items">7</div>
  24.     <div class="items">8</div>
  25.     <div class="items">9</div>
  26. </div>
  27. </body>
  28. </html>

2.2 創(chuàng)建隱式網(wǎng)格軌道

  • 定義：隱式網(wǎng)格軌道即 在一個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ò)展空間否則無效，如圖：
示例圖

2.3 設(shè)置創(chuàng)建軌道空間

  • gird-column-gap 設(shè)置列間距， grid-row-gap 設(shè)置行間距， grid-gap： 行距 列距 前兩者的簡寫， gap：10px; 超級簡寫列距行距都是10px,如圖；
示例圖

2.4 設(shè)置所有子元素在父元素中的對齊方式

  • justify-contens:start / end /cneter 有三個值 開始對齊，結(jié)束對齊，居中對齊 如圖；
示例圖

html代碼示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             /*居中對齊*/
  17.             /*justify-content: center;*/
  18.             /*從開始的地方對齊*/
  19.             /*justify-content: start;*/
  20.             /*結(jié)束的地方對齊*/
  21.             justify-content: end;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27. <div class="container">
  28.     <div class="items">1</div>
  29.     <div class="items">2</div>
  30.     <div class="items">3</div>
  31.     <div class="items">4</div>
  32.     <div class="items">5</div>
  33.     <div class="items">6</div>
  34.     <div class="items">7</div>
  35.     <div class="items">8</div>
  36.     <div class="items">9</div>
  37. </div>
  38. </body>
  39. </html>
  • align-content:start / end / conter ; 三個數(shù)值分別是子元素在父元素中垂直對齊方式，從開始地方，結(jié)束的地方，居中對齊，如圖；
示例圖

html 代碼示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             /*從開始的地方對齊*/
  17.             /*align-content: start;*/
  18.             /*居中對齊*/
  19.             /*align-content:center;*/
  20.             /*從結(jié)束的地方對齊*/
  21.             /*align-content:end;*/
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="container">
  29.     <div class="items">1</div>
  30.     <div class="items">2</div>
  31.     <div class="items">3</div>
  32.     <div class="items">4</div>
  33.     <div class="items">5</div>
  34.     <div class="items">6</div>
  35.     <div class="items">7</div>
  36.     <div class="items">8</div>
  37.     <div class="items">9</div>
  39. </div>
  40. </body>
  41. </html>
  • place-content: 列 行 ；:是justify-content和justify-content:的縮寫形式；

2.5 所有項目在單元格中的對齊方式；

  • justify-items: stretch / start / cneter / end ; 有四個數(shù)值，拉伸/開始的地方/居中/結(jié)束的地方，在行的方向?qū)R,默認(rèn)會拉伸擴(kuò)展，如圖；
示例圖

html代碼示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             /*所有項目在單元格在拉伸鋪滿*/
  17.             /*justify-items: stretch;*/
  18.             /*項所有目在單元格水平方向開始的地方對齊*/
  19.             /*justify-items:start;*/
  20.             /*所有項目在單元格水平方向居中對齊*/
  21.             /*justify-items: center;*/
  22.             /*所有項目在單元格水平方向在結(jié)束地方對齊*/
  23.             justify-items: end;
  24.         }
  25.         .container > div:first-of-type{
  26.             background-color: #55a532;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <div class="container">
  32.     <div class="items">1</div>
  33.     <div class="items">2</div>
  34.     <div class="items">3</div>
  35.     <div class="items">4</div>
  36.     <div class="items">5</div>
  37.     <div class="items">6</div>
  38.     <div class="items">7</div>
  39.     <div class="items">8</div>
  40.     <div class="items">9</div>
  41. </div>
  42. </body>
  43. </html>
  • aling-items: stretch / start / center / end ;有四個數(shù)值，拉伸/開始的地方/居中/結(jié)束的地方，在列的方向?qū)R,默認(rèn)會拉伸擴(kuò)展，如圖；
示例圖

html代碼示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.            /*所有項目在單元格列的方向拉伸*/
  17.             /*align-items: stretch;*/
  18.             /*所有項目在單元格列的方向從開始的地方對齊*/
  19.             /*align-items: start;*/
  20.             /*所有項目在單元格方向居中對齊*/
  21.             /*align-items: center;*/
  22.             /*所有項目在單元格列方向結(jié)束的地方對齊*/
  23.             align-items: end;
  25.         }
  26.         .container > div:first-of-type{
  27.             background-color: #55a532;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <div class="container">
  33.     <div class="items">1</div>
  34.     <div class="items">2</div>
  35.     <div class="items">3</div>
  36.     <div class="items">4</div>
  37.     <div class="items">5</div>
  38.     <div class="items">6</div>
  39.     <div class="items">7</div>
  40.     <div class="items">8</div>
  41.     <div class="items">9</div>
  42. </div>
  43. </body>
  44. </html>
  • place-items: 列 行 是 justify-items和align-items 的簡寫模式；

3、Grid 項目屬性

3.1 將項目放到單元格中

  • grid-column-start:列線號； 開始的列線號；
  • grid-column-end:列線號； 結(jié)束的列線號；

  • grid-column: 開始列線號 / 結(jié)束列線號 ； ,簡寫模式；

  • grid-row-start:行線號； 開始的行線號；

  • grid-row-end:行線號； 結(jié)束的行線號；
  • grid-row: 開始行線號 / 結(jié)束行線號； 簡寫模式；
    項目放單元格示例圖,把項目1放到第一行，第一第二列內(nèi)；
示例圖

html 代碼示例；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             grid-column-start: 1;
  20.             grid-column-end: 3;
  21.             grid-row-start: 1;
  22.             grid-row-end: 2;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27. <div class="container">
  28.     <div class="items">1</div>
  29.     <div class="items">2</div>
  30.     <div class="items">3</div>
  31.     <div class="items">4</div>
  32.     <div class="items">5</div>
  33.     <div class="items">6</div>
  34.     <div class="items">7</div>
  35.     <div class="items">8</div>
  36.     <div class="items">9</div>
  37. </div>
  38. </body>
  39. </html>

3.2 將項目放到網(wǎng)格區(qū)域中

  • grid-area: 上 / 左 / 下 / 右 ； 里面的值均為線號；如圖；
示例圖

html代碼示例；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             grid-area: 1 / 1 / 3 / 3 ;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <div class="container">
  25.     <div class="items">1</div>
  26.     <div class="items">2</div>
  27.     <div class="items">3</div>
  28.     <div class="items">4</div>
  29.     <div class="items">5</div>
  30.     <div class="items">6</div>
  31.     <div class="items">7</div>
  32.     <div class="items">8</div>
  33.     <div class="items">9</div>
  34. </div>
  35. </body>
  36. </html>
  • grid-area: 區(qū)域名稱； 把項目放在已經(jīng)命名的區(qū)域中，如圖；
示例圖

html代碼示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.             grid-template-areas:'a b c' 'd e f' 'g h i';
  17.         }
  18.         .container > div:first-of-type{
  19.             background-color: #55a532;
  20.             grid-area: e ;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="container">
  26.     <div class="items">1</div>
  27.     <div class="items">2</div>
  28.     <div class="items">3</div>
  29.     <div class="items">4</div>
  30.     <div class="items">5</div>
  31.     <div class="items">6</div>
  32.     <div class="items">7</div>
  33.     <div class="items">8</div>
  34.     <div class="items">9</div>
  35. </div>
  36. </body>
  37. </html>

3.3 項目在單元格中的對齊方式

  • justify-self: start / center / end ; 單個項目在單元格中水平方向?qū)R方式，如圖；
示例圖

html代碼示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             /*默認(rèn)方式從開始的地方對齊*/
  20.             /*justify-self: start;*/
  21.             /*居中對齊*/
  22.             /*justify-self: center;*/
  23.             /*從結(jié)束的地方對齊*/
  24.             justify-self: end;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="container">
  30.     <div class="items">1</div>
  31.     <div class="items">2</div>
  32.     <div class="items">3</div>
  33.     <div class="items">4</div>
  34.     <div class="items">5</div>
  35.     <div class="items">6</div>
  36.     <div class="items">7</div>
  37.     <div class="items">8</div>
  38.     <div class="items">9</div>
  39. </div>
  40. </body>
  41. </html>
  • align-self: start / center / end ; 單個項目在單元格中 垂直方向的對齊方式,如圖；
示例圖

html 代碼示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             /*默認(rèn)方式從開始的地方對齊*/
  20.             /*align-self: start;*/
  21.             /*居中對齊*/
  22.             /*align-self: center;*/
  23.             /*從結(jié)束的地方對齊*/
  24.             align-self: end;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="container">
  30.     <div class="items">1</div>
  31.     <div class="items">2</div>
  32.     <div class="items">3</div>
  33.     <div class="items">4</div>
  34.     <div class="items">5</div>
  35.     <div class="items">6</div>
  36.     <div class="items">7</div>
  37.     <div class="items">8</div>
  38.     <div class="items">9</div>
  39. </div>
  40. </body>
  41. </html>
  • place-self:垂直方向 水平方向 單個項目在單元格對齊方式的簡寫，如圖；
示例圖

html 代碼示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid 布局屬性案例</title>
  6.     <style>
  7.         * :not(body) {
  8.             outline: 1px dashed red;
  9.         }
  10.         .container {
  11.             width: 300px;
  12.             height: 300px;
  13.             display: grid;
  14.             grid-template-rows: repeat(3, 50px);
  15.             grid-template-columns: repeat(3, 50px);
  16.         }
  17.         .container > div:first-of-type{
  18.             background-color: #55a532;
  19.             /*place-self:垂直方向 水平方向 單個項目在單元格對齊方式的簡寫*/
  20.             place-self: center end;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="container">
  26.     <div class="items">1</div>
  27.     <div class="items">2</div>
  28.     <div class="items">3</div>
  29.     <div class="items">4</div>
  30.     <div class="items">5</div>
  31.     <div class="items">6</div>
  32.     <div class="items">7</div>
  33.     <div class="items">8</div>
  34.     <div class="items">9</div>
  35. </div>
  36. </body>
  37. </html>

總結(jié)

  • 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屬性

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：完成的相當(dāng)出色, 達(dá)到與我們自己的專業(yè)技術(shù)編輯發(fā)文水準(zhǔn)了
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)