search

博客列表 >12.30Grid项目属性练习。

12.30Grid项目属性练习。

曾
曾原创
2019年12月31日 13:21:18599浏览

网格布局

把一个元素转为网格布局。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-content与justify-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-content与align-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>
  9. </div>
  10. </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年的最后一天写完作业，其实不难发现，网格布局和弹性布局在属性上有一定的相同之处，在布局的时候不要一根筋的就使用一种布局，网格布局可以在大方向上做好统筹，弹性盒子更适合在一些细微的地方使用，网格布局和弹性布局都是可以互相嵌套，但是不建议嵌套太多，会把自己给绕懵，代码也会比较臃肿，妨碍后期修改。

上一条：laravel框架学习--php培训九期线上班下一条：前端学习-1223号作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多