CSS 利用display:grid实现九宫格

生成3x3九宫格
每列宽100px,每行高100px

//绝对单位
.box{
  display:grid;
  grid-template-columns:100px 100px 100px;
   grid-template-rows:100px 100px 100px;
}
//相对单位
.box{
  display:grid;
  grid-template-columns:33.33% 33.33% 33.33%;
   grid-template-rows:33.33% 33.33% 33.33%;
}
//使用repeat函数,简化重复书写同样的值
.box{
  display:grid;
  grid-template-columns: repeat(3, 33.33%);
   grid-template-rows: repeat(3, 33.33%);
}

repeat(times,value)
times为重复次数,value为需要重复的值

//定义四列,第一三列列宽为10px,二四列列宽为50px
grid-template-rows: repeat(2, 10px 50px);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid :学习...
    422ccfa02512阅读 851评论 0 12
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,344评论 0 11
  • 本文仍旧转载于阮一峰老师 一、概述 网格布局(Grid)是最强大的 CSS 布局方案。 它将网页划分成一个个网格,...
    blossom_绽放阅读 530评论 0 0
  • 简介 CSS网格布局擅长于将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。 学习grid布...
    Xiamer阅读 462评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,641评论 0 6