网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线：028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

查看费用明细

建站知识

当前位置：首页 > 建站知识

css中grid属性的作用是什么

这篇文章给大家介绍css中grid属性的作用是什么，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

芷江网站建设公司成都创新互联,芷江网站设计制作，有大型网站制作公司丰富经验。已为芷江成百上千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的芷江做网站的公司定做！

grid布局

加在父元素上的属性

grid-template-columns/grid-template-rows

  • 定义元素的行或列的宽高

  • 如果父元素被等分成了9等分，则，不管有多少个子元素，都显示9等分

  • grid-template-columns: 33% 33% 33%;可以写成grid-template-columns:repeat(3, 33%);

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container1 {
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 33% 33% 33%;
}

css中grid属性的作用是什么

grid-template-areas

  • 父元素的grid-template-areas配合子元素的grid-area定义网格区域

  • 一个句点表示一个空的网格单元

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "header header . footer"
    "main main . sidebar"
    "main main . sidebar";
}

.container2 .item-1 {
  grid-area: header;
}

.container2 .item-2 {
  grid-area: main;
}

.container2 .item-3 {
  grid-area: sidebar;
}

.container2 .item-4 {
  grid-area: footer;
}

  header
  main
  sidebar
  footer

css中grid属性的作用是什么

grid-column-gap/grid-row-gap/grip-gap

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container3 {
  grid-template-columns: repeat(3, 30%);
  grid-template-rows: repeat(3, 30%);
  grid-column-gap: 2%;
  grid-row-gap: 2%;
}

  
  
  
  
  
  
  
  
  

css中grid属性的作用是什么

justify-items/align-itemsjustify-items

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container4 {
  width: 400px;
  height: 200px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
}
.container4 .item {
  display: grid;
}
.container4 .item div {
  background-color: coral;
  border: 1px dashed #aaa
}
.container4 .item-1 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: start;
}
.container4 .item-2 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: end;
}
.container4 .item-3 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: center;
}
.container4 .item-4 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: stretch;
}
.container4 .item-5 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: start;
}
.container4 .item-6 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: end;
}
.container4 .item-7 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: center;
}
.container4 .item-8 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: stretch;
}

  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  

css中grid属性的作用是什么

justify-content/align-content

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container5 {
  width: 700px;
  height: 200px;
  grid-template-columns: repeat(7, 14%);
  grid-template-rows: repeat(2, 50%);
}

.container5 .item {
  display: grid;
}

.container5 .item div {
  background-color: coral;
  border: 1px dashed #aaa
}

.container5 .item-1 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: start;
}

.container5 .item-2 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: end;
}

.container5 .item-3 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: center;
}

.container5 .item-4 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: stretch;
}

.container5 .item-5 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-around;
}

.container5 .item-6 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-between;
}

.container5 .item-7 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-evenly;
}

.container5 .item-8 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: start;
}

.container5 .item-9 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: end;
}

.container5 .item-10 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: center;
}

.container5 .item-11 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: stretch;
}

.container5 .item-12 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-around;
}

.container5 .item-13 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-between;
}

.container5 .item-14 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-evenly;
}

  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  
  
    
list

    
list

    
list

    
list

  

css中grid属性的作用是什么

grid-auto-columns/grid-auto-rowsgrid-column

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container6 {
  width: 120px;
  height: 180px;
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
  grid-auto-columns: 60px;
}
.container6 .item-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  border: 1px solid #ccc;
}
.container6 .item-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
  border: 1px solid #ccc;
}

  1/2&2/3
  5/6&2/3

css中grid属性的作用是什么

css中grid属性的作用是什么

grid-auto-flow

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container7 {
  display: grid;
  width: 200px;
  height: 40px;
  grid-template-columns: 40px 40px 40px 40px 40px;
  grid-template-rows: 40px 40px;
  /* grid-auto-flow: row; */
  grid-auto-flow: column;
}
.container7 .item-1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.container7 .item-5 {
  grid-column: 5;
  grid-row: 1 / 3;
}

  1
  2
  3
  4
  5

css中grid属性的作用是什么

css中grid属性的作用是什么

加在子元素上的属性

grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container8 {
  margin-top: 20px;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(5, 20%);
}
.container8 .item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.container8 .item-2 {
  grid-column-start: 4;
  grid-column-end: span 5;
  grid-row-start: 2;
  grid-row-end: span 5;
}
.container8 .item-3 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 4;
}

  item-1
  item-2
  item-3

css中grid属性的作用是什么

css中grid属性的作用是什么

justify-self/align-self

网格子项内容与格线对齐

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container9 {
  width: 400px;
  height: 200px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
}
.container9 .item-1 {
  justify-self: start;
}
.container9 .item-2 {
  justify-self: end;
}
.container9 .item-3 {
  justify-self: center;
}
.container9 .item-4 {
  justify-self: stretch;
}
.container9 .item-5 {
  align-self: start;
}
.container9 .item-6 {
  align-self: end;
}
.container9 .item-7 {
  align-self: center;
}
.container9 .item-8 {
  align-self: stretch;
}

  item-1
  item-2
  item-3
  item-4
  item-5
  item-6
  item-7
  item-8

css中grid属性的作用是什么

css中grid属性的作用是什么

css的基本语法是什么

css的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。

关于css中grid属性的作用是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


当前标题：css中grid属性的作用是什么
转载注明：http://bjjierui.cn/article/gcpddg.html

其他资讯

Copyright © 2012-2020 网创优客信息咨询 版权所有 蜀ICP备2023009085号-7
手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号 邮编:610000 Email:wh@cdxwcx.com
成都网络公司-网创优客建站品牌专注成都网站建设、成都网站设计服务，为成都公司建设高品质的网站