登录  /  注册
博主信息
博文 30
粉丝 0
评论 1
访问量 22997
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
12.30Grid项目属性练习。
原创
577人浏览过

网格布局

把一个元素转为网格布局。display:grid
画格子,grid-template-columns 设置网格的列(后面写像素,一个完整的像素代表一列,列宽)
行,grid-template-rows 设置网格的行(后面写像素,一个完整的像素代表一行,行高)
HTML主要代码

  1. <body>
  2. <pre><code>grid-template-columns,设置网格的列数1fr表示把600px宽度平均分3份。
  3. grid-template-rows,设置两行等分</code></pre>
  4. <div class="container">
  5. <div class="item1">1</div>
  6. <div class="item2">2</div>
  7. <div class="item3">3</div>
  8. <div class="item4">4</div>
  9. <div class="item5">5</div>
  10. <div class="item6">6</div>
  11. </div>
  12. </body>

CSS主要代码

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:1fr 1fr 1fr;
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. }
  14. </style>

效果图

网格列/行间隙

列间隙grid-column-gap ,行间隙grid-row-gap
两个属性后面都是写像素(可以理解为padding,有相似之处)
他们的缩写grid-gap:列间隙/行间隙,网格布局的所有缩写都是先列后行。

HTML主要代码

  1. <body>
  2. <pre><code>grid-gap:行/列间隙,缩写</code></pre>
  3. <div class="container">
  4. <div class="item1">1</div>
  5. <div class="item2">2</div>
  6. <div class="item3">3</div>
  7. <div class="item4">4</div>
  8. <div class="item5">5</div>
  9. <div class="item6">6</div>
  10. </div>
  11. </body>

CSS主要代码

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:1fr 1fr 1fr;
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. /*设置列间隙*/
  14. /*grid-column-gap: 10px;*/
  15. /*设置行间隙*/
  16. /*grid-row-gap: 10px;*/
  17. /*列间隙,行间隙缩写*/
  18. grid-gap: 10px 20px;
  19. }
  20. </style>

效果图

隐式网格

隐式网格:如果一个三行三列的网格布局,多出一个项目,系统就会自动把网格变为四行四列,以存放多出来的项目。

属性grid-auto-columns 隐式网格列设置,grid-auto-rows隐式网格行设置
设置隐式网格涉及到网格项目的排列方式,grid-auto-flow属性为column|row默认是行排列,如果行排列,隐式网格的列就继承显式网格设置的列宽,只能设置隐式网格的行高。
如果grid-auto-flow属性为column,列方向排列方式,隐式网格的行高就继承显式网格设置的行高,只能设置隐式网格的列宽。
HTM主要代码

  1. <body>
  2. <pre><code>多出项目不设置隐式网,全是默认值</code></pre>
  3. <div class="container">
  4. <div class="item1">1</div>
  5. <div class="item2">2</div>
  6. <div class="item3">3</div>
  7. <div class="item4">4</div>
  8. <div class="item5">5</div>
  9. <div class="item6">6</div>
  10. </div>
  11. </body>

CSS主要代码(默认值)

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:1fr 1fr 1fr;
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. grid-template-areas:
  14. 'A A B'
  15. 'C C D';
  16. }
  17. .container>.item1{
  18. grid-area: A;
  19. background-color: lightgray;
  20. }
  21. .container>.item2{
  22. grid-area: D;
  23. background-color: lightblue;
  24. }
  25. .container>.item3{
  26. grid-area: C;
  27. background-color: lavender;
  28. }
  29. .container>.item4{
  30. grid-area: B;
  31. background-color: lightcyan;
  32. }
  33. </style>

效果图

设置了排列方式为column的效果
CSS代码

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:1fr 1fr 1fr;
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. /*排列方式*/
  14. /*列排列*/
  15. grid-auto-flow:column;
  16. }
  17. </style>

效果图

排列方式为默认值(行排列)设置行高
CSS代码

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:1fr 1fr 1fr;
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. grid-template-areas:
  14. 'A A B'
  15. 'C C D';
  16. /*排列方式*/
  17. /*列排列*/
  18. /*grid-auto-flow:column;*/
  19. /*行排列,默认*/
  20. /*grid-auto-flow:row;*/
  21. /*隐式列宽*/
  22. grid-auto-columns: 100px;
  23. /*隐式行高*/
  24. grid-auto-rows: 50px;
  25. }
  26. .container>.item1{
  27. grid-area: A;
  28. background-color: lightgray;
  29. }
  30. .container>.item2{
  31. grid-area: D;
  32. background-color: lightblue;
  33. }
  34. .container>.item3{
  35. grid-area: C;
  36. background-color: lavender;
  37. }
  38. .container>.item4{
  39. grid-area: B;
  40. background-color: lightcyan;
  41. }

效果图 (在CSS代码上有设置列宽,但是实际效果图上却没有效果)

排列方式为列,设置列宽
CSS代码

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:1fr 1fr 1fr;
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. grid-template-areas:
  14. 'A A B'
  15. 'C C D';
  16. /*排列方式*/
  17. /*列排列*/
  18. grid-auto-flow:column;
  19. /*行排列,默认*/
  20. /*grid-auto-flow:row;*/
  21. /*隐式列宽*/
  22. grid-auto-columns: 100px;
  23. /*隐式行高*/
  24. grid-auto-rows: 50px;
  25. }
  26. .container>.item1{
  27. grid-area: A;
  28. background-color: lightgray;
  29. }
  30. .container>.item2{
  31. grid-area: D;
  32. background-color: lightblue;
  33. }
  34. .container>.item3{
  35. grid-area: C;
  36. background-color: lavender;
  37. }
  38. .container>.item4{
  39. grid-area: B;
  40. background-color: lightcyan;
  41. }
  42. </style>

效果图 (在CSS代码上有设置行高,但是实际效果图上却没有效果)

单元格合并,项目指定在某个单元格显示

使用grid-template-areas给单元格命名,然后配合项目/子元素属性grid-area给项目/子元素命名,以达到单元格合并,或者给某个项目/子元素指定在某个单元格显示(不按照书写顺显示)
实际运用HTML主要代码

  1. <body>
  2. <pre><code>排列方式为列,设置列宽,设置了行高没有效果</code></pre>
  3. <div class="container">
  4. <div class="item1">1</div>
  5. <div class="item2">2</div>
  6. <div class="item3">3</div>
  7. <div class="item4">4</div>
  8. </div>
  9. </body>

CSS主要代码

  1. .container{
  2. width: 600px;
  3. height: 300px;
  4. margin-top: 20px;
  5. /*转为网格*/
  6. display: grid;
  7. outline: 1px dashed red;
  8. /*设置三列等分*/
  9. grid-template-columns:1fr 1fr 1fr;
  10. /*设置两行等分*/
  11. grid-template-rows: 1fr 1fr;
  12. grid-template-areas:
  13. 'A A B'
  14. 'C C D';
  15. }
  16. .container>.item1{
  17. grid-area: A;
  18. background-color: lightgray;
  19. }
  20. .container>.item2{
  21. grid-area: B;
  22. background-color: lightblue;
  23. }
  24. .container>.item3{
  25. grid-area: C;
  26. background-color: lavender;
  27. }
  28. .container>.item4{
  29. grid-area: D;
  30. background-color: lightcyan;
  31. }
  32. </style>

效果图

使用grid-template-areas给单元格命名,然后配合项目/子元素属性grid-area给项目/子元素命名,给某个项目/子元素指定在某个单元格显示(不按照书写顺显示)
CSS主要代码

  1. .container{
  2. width: 600px;
  3. height: 300px;
  4. margin-top: 20px;
  5. /*转为网格*/
  6. display: grid;
  7. outline: 1px dashed red;
  8. /*设置三列等分*/
  9. grid-template-columns:1fr 1fr 1fr;
  10. /*设置两行等分*/
  11. grid-template-rows: 1fr 1fr;
  12. grid-template-areas:
  13. 'A A B'
  14. 'C C D';
  15. }
  16. .container>.item1{
  17. grid-area: A;
  18. background-color: lightgray;
  19. }
  20. .container>.item2{
  21. grid-area: D;
  22. background-color: lightblue;
  23. }
  24. .container>.item3{
  25. grid-area: C;
  26. background-color: lavender;
  27. }
  28. .container>.item4{
  29. grid-area: B;
  30. background-color: lightcyan;
  31. }
  32. </style>

效果图(grid-template-areas给单元格命名,然后用grid-area给项目/子元素命名,然后item2和item4调换位置)

Grid布局对齐方式

使用justify-content设置整个项目的横向对齐方式,align-content设置整个项目的垂直方向对齐方式,使用方法和弹性盒子有点类似(注意,必须是在整体项目大小小于,网格/父元素时使用才有效果)
缩写为place-content,值为align-contentjustify-content(先垂直后横向)
其属性值都是相同的有start开始线,end结束线,center居中,stretch拉伸
HTML代码

  1. <body>
  2. <pre><code>place-content为align-content和justify-content的缩写,place-content:第一个值为垂直方向/第二个值为横向</code></pre>
  3. <div class="container">
  4. <div class="item1">1</div>
  5. <div class="item2">2</div>
  6. <div class="item3">3</div>
  7. <div class="item4">4</div>
  8. </div>

CSS代码

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列宽为150PX*/
  10. grid-template-columns:repeat(3, 150px);
  11. /*设置两行等分*/
  12. grid-template-rows: 100px 100px;
  13. grid-template-areas:
  14. 'A A B'
  15. 'C C D';
  16. /*设置横向对齐方式*/
  17. /*justify-content: center;*/
  18. /*设置垂直方向对齐方式*/
  19. /*align-content: center;*/
  20. place-content: start center;
  21. }
  22. .container>.item1{
  23. grid-area: A;
  24. background-color: lightgray;
  25. }
  26. .container>.item2{
  27. grid-area: B;
  28. background-color: lightblue;
  29. }
  30. .container>.item3{
  31. grid-area: C;
  32. background-color: lavender;
  33. }
  34. .container>.item4{
  35. grid-area: D;
  36. background-color: lightcyan;
  37. }
  38. </style>

效果图(使用place-content完成的)

以上justify-contentalign-content的参照物为网格/父元素。

项目具体内容的对齐方式

使用justify-items设置内容在项目内的横向排列方式,align-items设置内容在项目内的垂直方向排列方式,缩写place-items
其属性值都是相同的有start开始线,end结束线,center居中,stretch拉伸
HTML代码

  1. <body>
  2. <pre><code>place-items为align-items和justify-items的缩写,place-items:第一个值为垂直方向/第二个值为横向</code></pre>
  3. <div class="container">
  4. <div class="item1">ONE</div>
  5. <div class="item2">TOW</div>
  6. <div class="item3">THREE</div>
  7. <div class="item4">FOUR</div>
  8. </div>
  9. </body>

CSS代码 使用place-items完成

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:repeat(3, 1fr);
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. grid-template-areas:
  14. 'A A B'
  15. 'C C D';
  16. /*设置项目上内容的横向排列方式*/
  17. /*横向结束线对齐*/
  18. /*justify-items: stretch;*/
  19. /*横向居中对齐*/
  20. /*justify-items: center;*/
  21. /*设置项目上内容垂直方向对齐方式*/
  22. /*垂直方向居中对齐*/
  23. /*align-items: center;*/
  24. /*垂直方向结束线对齐*/
  25. /*align-items: end;*/
  26. /*缩写方式*/
  27. /*place-items: 垂直方向/横向;*/
  28. place-items: end center;
  29. }
  30. .container>.item1{
  31. grid-area: A;
  32. background-color: lightgray;
  33. }
  34. .container>.item2{
  35. grid-area: D;
  36. background-color: lightblue;
  37. }
  38. .container>.item3{
  39. grid-area: C;
  40. background-color: lavender;
  41. }
  42. .container>.item4{
  43. grid-area: B;
  44. background-color: lightcyan;
  45. }
  46. </style>

效果图

使用justify-self设置单个项目上内容的横向排列方式,align-self设置单个项目上内容的垂直方向排列方式,缩写place-self
其属性值都是相同的有start开始线,end结束线,center居中,stretch拉伸
HTML代码

  1. <body>
  2. <pre><code>缩写为place-self,place-self:end center第一个值为垂直方向对齐/第二个值为横向对齐</code></pre>
  3. <div class="container">
  4. <div class="item1">ONE</div>
  5. <div class="item2">TOW</div>
  6. <div class="item3">THREE</div>
  7. <div class="item4">FOUR</div>
  8. </div>
  9. </body>

CSS代码

  1. <style>
  2. .container{
  3. width: 600px;
  4. height: 300px;
  5. margin-top: 20px;
  6. /*转为网格*/
  7. display: grid;
  8. outline: 1px dashed red;
  9. /*设置三列等分*/
  10. grid-template-columns:repeat(3, 1fr);
  11. /*设置两行等分*/
  12. grid-template-rows: 1fr 1fr;
  13. grid-template-areas:
  14. 'A A B'
  15. 'C C D';
  16. }
  17. .container>.item1{
  18. width: 200px;
  19. height: 100px;
  20. /*单独指定item1项目横向对齐方式*/
  21. /*justify-self: center;*/
  22. /*单独指定item1项目的垂直方向排列方式*/
  23. /*align-self: end;*/
  24. /*缩写*/
  25. place-self: end center;
  26. grid-area: A;
  27. background-color: lightgray;
  28. }
  29. .container>.item2{
  30. grid-area: D;
  31. background-color: lightblue;
  32. }
  33. .container>.item3{
  34. grid-area: C;
  35. background-color: lavender;
  36. }
  37. .container>.item4{
  38. grid-area: B;
  39. background-color: lightcyan;
  40. }
  41. </style>

效果图(使用place-items完成)

2019年的最后一天写完作业,其实不难发现,网格布局和弹性布局在属性上有一定的相同之处,在布局的时候不要一根筋的就使用一种布局,网格布局可以在大方向上做好统筹,弹性盒子更适合在一些细微的地方使用,网格布局和弹性布局都是可以互相嵌套,但是不建议嵌套太多,会把自己给绕懵,代码也会比较臃肿,妨碍后期修改。

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:只要事先规划好, 头脑就是会很清楚, 从简到繁, 就好做了
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学