Home CSS

# display grid

  • 通过设置 CSS 属性 display: grid; 可以定义一个 CSS 网格。接着可以使用 grid-template-rows 和 grid-template-columns 属性定义网格的列属性 (columns) 和行属性 (rows)。
  • 使用这些属性定义的网格被称为 * 显式网格 (explicit grid)
  • 通过 display grid 来打开 grid 布局，下面将都会使用 stylus 预处理器来演示
    • stylus -w index.styl -o index.css

# 基本概念

basic-conception

# 基本结构

  • HTML结构
<main class="box">
  <div class="item item1">A</div>
  <div class="item item2">B</div>
  <div class="item item3">C</div>
  <div class="item item4">D</div>
  <div class="item item5">E</div>
  <div class="item item6">F</div>
  <div class="item item7">G</div>
  <div class="item item8">H</div>
  <div class="item item9">I</div>
  <div class="item item10">J</div>
</main>
  • 这里先给 10 个子盒子定义不同颜色样式，后面就不再重复这些代码了
.item 
  color #fff
  font-size 50px
  background-color #e91e63d
  
.item1
  background-color #ef342a
.item2
  background-color #f68f26
.item3
  background-color #4ba946
.item4
  background-color #0376c2
.item5
  background-color #c077af
.item6
  background-color #f8d29d
  
.item7
  background-color #b5a87f
.item8
  background-color #d0e4a9
.item9
  background-color #4dc7ec
.item10
  background-color #ef342a
# grid-template-columns


    

  • grid-template-columns  该属性是基于 网格列。的维度，去定义网格线的名称和网格轨道的尺寸大小。
    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-template-columns 100px 100px 100px
    

  • 此时效果就是三列，每列都是 100px
    • 



grid-template-columns1


# repeat


    

  • 

    第一个参数是重复的次数，第二个参数是所要重复的值
    

    • 

  • 

    例如下面这两行代码效果是一样的
    

      

    • grid-template-columns 100px 100px 100px
      • 

    •  grid-template-columns repeat(3, 100px)
      • 

    

    • 



# auto-fill


    

  • auto-fill ，有时，单元格大小是固定的，但是容器的大小不确定，这个属性就会自动填充
    • 

  • 比如下面这个代表每列盒子是 100px 排布，如果剩余位置小于 100px 就会换行显示
    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-template-columns repeat(auto-fill, 100px)
repeat-auto-fill


# fr


    

  • 

    fr ，为了方便表示比例关系，网格布局提供了 fr 关键字 (fraction 的缩写，意为 '' 片段 '')
    

    • 

  • 

    grid-template-columns repeat*(3, 1fr)   宽带平均分成 3 份
    

    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-template-columns repeat(3, 1fr)
repeat-1fr


    

  • 又比如 grid-template-columns 1fr 2fr 3fr

      

    • 意味着三列，第一列占  1 / (1 + 2 + 3) = 六分之一，依次类推占六分之二与六分之三
      • 

    

    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-template-columns 1fr 2fr 3fr
1fr-2fr-3fr


# minmax()


    

  • minmax (), 函数参数一个长度范围，表示长度就在这个范围之中，它接收两个参数，分别为最小值和最大值
    • 



main 
  display grid
  border 5px solid skyblue
  grid-template-columns 1fr minmax(250px, 1fr)
    

  • 这里写段 JS 代码测试就可以看出宽度最小不可小于 250px ，最大不可大于 1fr
    • 



const box = document.querySelector('.box')
const items = document.querySelectorAll('.item')
function getElWidth(el) {
  return el.clientWidth
}
let width = getElWidth(box)
  
function getWindowInfo() {
  if (getElWidth(box) != width) {
    for (let i = 0; i < items.length; i++)
      items[i].textContent = items[i].offsetWidth + 'px'
  }
  width = getElWidth(box)
}
window.addEventListener('resize', getWindowInfo);
minmax


# auto


    

  • auto，表示由浏览器自己决定长度
    • 

  • grid-template-columns 150px auto 150px , 表示两边 150px，中间自动分配
    • 



main 
  display grid
  border 5px solid skyblue
  grid-template-columns 150px auto 150px
auto


# grid-auto-rows


    

  • 

    <length>
    

    一个非负的长度。
    

    • 

  • 

    <percentage>
    

    相对于网格窗口块尺寸的非负 `` 值。如果网格容器的块尺寸是不确定的，则百分比值将被视为  auto 。
    

    • 

  • 

    <flex>
    

    非负的、以  fr  为单位的维度指定轨道的弹性因子。每个  <flex> - 尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。 当使用在  minmax()  符号外时，意味着最小值为  auto  (例：  minmax(auto, <flex>) ).
    

    • 

  • 

    max-content
    

    关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。
    

    • 

  • 

    min-content
    

    关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。
    

    • 

  • 

    minmax(min, max)
    

    函数符号，定义一个不小于 min  且不大于 max  的尺寸范围。如果 max  比 min  小，则 max  会被忽略，函数会被录作 min  处理。作为最大值， <flex>  值设置了轨道的弹性因子。作为最小值，会被当作 0 处理（或者最小内容 —— 当网格容器指定了尺寸为最小内容）。
    

    • 

  • 

    auto
    

    关键字，当用来指定最大值时与最大内容一致，当用来指定最小值时，它表示轨道中所有网格元素最小尺寸中的最大值（由 min-width / min-height  指定）。
    

    注意： auto  轨道尺寸（且仅有  auto  轨道尺寸）可配合 align-content  和 justify-content  属性使用。
    

    • 

  • 

    这里随便演示下
    

    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-template-columns repeat(3, 100px) 
  grid-auto-rows repeat(4, 150px)
grid-auto-rows


# row-gap & column-gap


    

  • 就是 item 相互之间的距离
    • 

  • 注意：根据最新标准，上面这个属性名的 grid-  前缀已经删除： grid-column-gap、grid-row-gap、grid-gap  写成 column-gap、row-gap、gap
    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns 100px 100px 100px
  row-gap 20px
  column-gap 20px
gap


    

  • 当然可以直接简写成  gap 20px  与上面效果是一样的
    • 



# grid-template-areas


    

  • 一个区域有单个或多个单元格组成，由你决定 (具体使用，需要在项目属性里面设置)
    • 



// 代表 A B C D E F F H I 各是一块区域
grid-template-areas 'a b c' 'd e f' 'g h i'
// 代表 ABC 是一块区域 DEF 是一块区域 GHI 是一块区域
grid-template-areas 'a a a' 'b b b' 'c c c'
// 代表 AC 是一块区域 DF 是一块区域 GI 是一块区域 中间的忽略掉
grid-template-areas 'a . c' 'd . f' 'g . i'
# grid-auto-flow


    

  • 

    划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是 "先行后列"，即先填满第一行，再开始放入第二行 (子元素的排放顺序)
    

    • 

  • 

    默认是  row
    

    • 

  • 

    那么下面设置  grid-auto-flow column  这行代码的效果如下
    

    • 



grid-auto-flow-column


# row dense


    

  • 先加上基本属性
    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns repeat(3, 100px)
    

  • 然后来给 item1 item2  加上这句代码看看效果
    • 



.item1
  grid-column: 1 / 3
  background-color #ef342a
.item2
  grid-column: 1 / 3
  background-color #f68f26
    

  • 可以看到每个 item 的宽度本来是 100px, 但是  item1 item2  设置了  grid-column: 1 / 3 ，此时宽度是 200px 了，那么 一行是排不下的自然会换行，所以就是下面的效果了
    • 



grid-auto-flow-row-no-dense


    

  • 此时我们给  main  加上  grid-auto-flow row dense  这句代码，再来看看效果
    • 



grid-auto-flow-row-dense


# justify-items & align-items


    

  • 容器属性 justify-items (水平方向) /align-items (垂直方向)
    • 

  • 设置 单元格内容 的水平和垂直的对齐方式
    • 



# justify-items center


    

  • 设置  justify-items center  的效果
    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns repeat(3, 100px)
  justify-items center
justify-items-center


# align-items center


    

  • 设置  align-items center  的效果
    • 



main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns repeat(3, 100px)
  align-items center
align-items-center


# 同时设置


main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns repeat(3, 100px)
  align-items center
  justify-items center
align-items-justify-items-center


    

  • place-items center center  这行代表是上面两行代码的简写，也可写成 ``place-items center`, 与上面的效果是一致的
    • 



# justify-content & align-content


    

  • 容器属性 justify-content (水平方向) /align-content (垂直方向)
    • 

  • 设置整个内容区域的水平和垂直的对齐方式
    • 

  • justify-content： start | end | center | stretch | space-around | space-between | space-evenly
    • 

  • align-content： start | end | center | stretch | space-around | space-between | space-evenly
    • 

  • 下面演示一个常用的 center
    • 



# justify-content center


main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns  repeat(3, 100px)
  justify-content center
justify-content-center


# align-content center


main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns  repeat(3, 100px)
  align-content center
align-content-center


# 同时设置 - 水平垂直居中


main 
  display grid
  width 400px
  height 400px
  border 5px solid skyblue
  grid-auto-rows repeat(4, 100px)
  grid-template-columns  repeat(3, 100px)
  justify-content center
  align-content center



justify-content-align-content-center


# grid-auto-rows & grid-auto-columns


    

  • 

    CSS 属性  grid-auto-rows  用于指定隐式创建的行轨道大小。
    

    • 

  • 

    用来设置多出来的 itemd  的宽和高
    

    • 

  • 

    没有设置  grid-auto-rows  时的代码效果
    

    • 



main 
  display grid
  width 500px
  height 500px
  border 5px solid skyblue
  grid-template-rows repeat(3, 100px)
  grid-template-columns  repeat(3, 100px)
no-grid-auto-rows


    

  • 设置了 grid-auto-columns 50px  这行代码之后，本来只设置三行三列，就是 9 项 (item)，本来有 10 项 (item)，所以多出来的一项就是被设置的属性了
    • 



grid-auto-columns-50px


# grid-column-start | end & grid-row-start | end


    

  • 用来指定 item 的具体位置，根据在哪根网格线，可以根据下面这个图参考
    • 



grid


    

  • column  网格线：start (哪根网格) 到 (end) 哪根网格
    • 



main 
  display grid
  width 400px
  height 500px
  border 5px solid skyblue
  grid-template-rows repeat(3, 100px)
  grid-template-columns repeat(3, 100px)
  
.item1
  grid-column-start 1
  grid-column-end 3 
  background-color #ef342a
.item2
  grid-column 2 / 4 // 这种方式 (start&end) 是上面两种的简写
  background-color #f68f26
grid-column


    

  • row  网格线
    • 



main 
  display grid
  width 400px
  height 500px
  border 5px solid skyblue
  grid-template-rows repeat(3, 100px)
  grid-template-columns  repeat(3, 100px)
  
.item1
  grid-row-start 1
  grid-row-end 3
  background-color #ef342a
.item2
  grid-row 2 / 3 // 这也是上面两句 (start&end) 的缩写
  background-color #f68f26
grid-row


# span


    

  • span 是跨越几网格线
    • 

  •  grid-column-start  与   grid-column-end  效果是一样的
    • 

  • 看下面代码演示
    • 



main 
  display grid
  width 400px
  height 500px
  border 5px solid skyblue
  grid-template-rows repeat(3, 100px)
  grid-template-columns  repeat(3, 100px)
  
.item1
  grid-column-start span 2
  background-color #ef342a
.item2
  grid-column-end span 2 // 这种和上面 start 是一样的
  background-color #f68f26
.item3
  grid-column span 4 // 这种就是跨越了 4 个网格
  background-color #4ba946
grid-column-span


# grid-area


    

  • 

    CSS 属性  grid-area  是一种对于  grid-row-start  (en-US)、 grid-column-start  (en-US)、 grid-row-end  (en-US) 和  grid-column-end  (en-US) 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定 grid area 的边界。
    

    • 

  • 

    如果指定了 4 个  <grid-line>  的值， grid-row-start  会被设为第一个值， grid-column-start  为第二个值，  grid-row-end  为第三个值， grid-column-end  为第四个值。
    

    当  grid-column-end  被忽略时，若  grid-column-start  为一 ``（自定义关键字数据类型），  grid-column-end  则为该  <custom-ident> ；否则为  auto 。
    

    当  grid-row-end  被忽略时，若  grid-row-start  为一  <custom-ident> ， grid-row-end  则为该  <custom-ident> ；否则为  auto 。
    

    当  grid-column-start  被忽略时，若  grid-row-start  为一  <custom-ident> ，则所有四项普通写法的属性值均为该值。否则为  auto 。
    

    网格面的属性亦可设为一 `` 作为其名称，然后可通过  grid-template-areas  作为其名称，然后可通过  grid-template-areas  放置。
    

    • 

  • 

    指定项目 (item) 放在哪一个区域
    

    • 



main 
  display grid
  width 400px
  height 500px
  border 5px solid skyblue
  grid-template-rows repeat(3, 100px)
  grid-template-columns repeat(3, 100px)
  grid-template-areas 'a a a' 'b b b' 'c c c'
  
.item1
  grid-area a
  background-color #ef342a
  
.item4
  grid-area b
  background-color #0376c2
grid-area


    

  • grid-area  也有简写方式，依次是

      

    • grid-row-start
      • 

    • grid-column-start
      • 

    • grid-row-end
      • 

    • grid-column-end
      • 

    

    • 



main 
  display grid
  width 400px
  height 500px
  border 5px solid skyblue
  grid-template-rows repeat(3, 100px)
  grid-template-columns  repeat(3, 100px)
  grid-template-areas 'a a a' 'b b b' 'c c c'
  
.item1
  grid-area 1 / 1 / 3 / 3
  background-color #ef342a
grid-area-1-1-3-3


# justify-self & align-self & place-self


    

  • 

    justify-self 属性设置单元格内容的水平位置 (左中右)，跟 justify-items  属性的用法完全一致，但只作用鱼单个项目 (水平方向)
    

    • 

  • 

    align-self 属性设置单元格内容的垂直位置 (上中下)，跟 align-items  属性的用法完全一致，但只作用鱼单个项目 (垂直方向)
    

    • 

  • 

    例如它们的属性也大致一样：justify-self：start | end | center | stretch
    

    • 

  • 

    下面就随便举个栗子
    

    • 



main 
  display grid
  width 400px
  height 500px
  border 5px solid skyblue
  grid-template-rows repeat(3, 100px)
  grid-template-columns  repeat(3, 100px)
  
.item1
  justify-self center
  background-color #ef342a
.item2
  justify-self end
  background-color #f68f26
.item3
  align-self center
  background-color #4ba946
.item4
  place-self center 
  background-color #0376c2
justify-self-align-self-place-self


      

          
          
      

  


   


    

  
    
      
    
    Update on
    
  
  
      
        
      
      Views
      
      times
  



      


  
  
Give me a cup of [coffee]~(￣▽￣)~*

  

      
      

        Nico Niconi WeChat Pay
        
WeChat Pay

      

      
      

        Nico Niconi Alipay
        
Alipay