CSS Grids教程学习笔记

广西嘉华李家鸣 發表於 2020-9-25 11:17:00

这是我在学习MDN内CSS Grids教程的学习笔记，教程地址：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
注：这个笔记之能做温习只用，看教程请上以上地址学习或者其他教学资源。
 
容器上设置display: grid;就成为了grid容器。
Grid容器上设置：
grid-template-column: 200px auto 1fr;可以设置各个列。1fr是占比，空间先被200px这样的固定宽度占用，剩下的再按各自fr的占比分配。
grid-column-gap或column-gap设置列之间的间隔宽度，不能使用fr。
grid-row-gap或row-gap设置行之间的间隔宽度，不能使用fr。
grid-gap或gap可以同时设置行和列的间隔宽度，不能使用fr。    
grid-template-column: repeat(3, 1fr)可以设置三个各为1fr的列。
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));可以设置列最小为200px，自动列数，有多余空间就使用掉。
 
隐形grid和显性grid的区分：
隐形grid是指指定列，没有指定行数，宽度大小都是默认auto，当溢出时就变成和flexbox差不多一样的排列显示方式。
显性grid是指指定了列和行，使用grid-auto-rows和grid-auto-columns属性指定行和列的大小。
 
Grid-auto-rows: minmax(100px, auto);可以设置行高最小100px,最大auto。
 
Grid元素上设置：
       grid-column: 1 / 3;可以设为1到3列的横跨排布；-1为最后一列
       grid-row: 2;可以设为在第二行的排布；-1为最后一行
grid-column-start，grid-column-end，grid-row-start，grid-row-end为以上的拆分。
 
以下属性放在grid容器上可以设置排布模板（只能是矩形，可以使用点符号 . 来代替空白）：
grid-template-areas:  
       “header header”
      “sidebar content”
       “footer footer”；
然后再各个grid元素上设置：grid-area: header;这样。
 
Grid可以代替像bootstrap这样的框架，可以设置12列，以下是line-based的图：
<img src="https://img2020.cnblogs.com/blog/1147685/202009/1147685-20200925111521715-1308296849.png" alt="" width="1372" height="837" loading="lazy">
如下代码设置每个grid元素的位置和占比。
<div class="cnblogs_code">
<pre>header {
grid-column: 1 / 13;
grid-row: 1;
}

article {
grid-column: 4 / 13;
grid-row: 2;
}

aside {
grid-column: 1 / 4;
grid-row: 2;
}

footer {
grid-column: 1 / 13;
grid-row: 3;
}</pre>
</div> 
来源：https://www.cnblogs.com/yangzetaodecnblogs/p/13728939.html

頁: [1]

琼殿技术论坛's Archiver

CSS Grids教程学习笔记