亚洲国产日韩欧美一区二区三区,精品亚洲国产成人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;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="container">
  27. <div class="items">1</div>
  28. <div class="items">2</div>
  29. <div class="items">3</div>
  30. <div class="items">4</div>
  31. <div class="items">5</div>
  32. <div class="items">6</div>
  33. <div class="items">7</div>
  34. <div class="items">8</div>
  35. <div class="items">9</div>
  36. </div>
  37. </body>
  38. </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;*/
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="container">
  27. <div class="items">1</div>
  28. <div class="items">2</div>
  29. <div class="items">3</div>
  30. <div class="items">4</div>
  31. <div class="items">5</div>
  32. <div class="items">6</div>
  33. <div class="items">7</div>
  34. <div class="items">8</div>
  35. <div class="items">9</div>
  36. </div>
  37. </body>
  38. </html>
  • place-content: 列 行 ;:是justify-contentjustify-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;
  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>
  • place-items: 列 行justify-itemsalign-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é)

  • gridflex 大致的差不太多,因為都能從大局和細(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é)