笔记 - Grid布局

Grid

.container {
  display: grid | inline-grid;
}

row column

.container {
grid-template-columns: 30px 30% auto;
grid-template-row: 30px 30% auto;
}

start end

/* 控制开始位置和结束位置 */
.sub-item {
grid-column-start: 1;
grid-column-end: 2;
}

grid-template-areas

利用标签直接划分区域

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

推荐阅读更多精彩内容

  • grid布局是一种新的布局方案。传统布局使用浮动和定位,而grid布局可以像表格一样将页面容器分割成一块一块的区域...
    gaiyb阅读 636评论 0 0
  • 参考资料 CSS Grid 网格布局教程 - 阮一峰 概述 网格布局(Grid)是最强大的 CSS 布局方案。 它...
    Lia代码猪崽阅读 397评论 0 0
  • 一、概述 网格布局(Grid)是最强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做...
    文艺小菜阅读 614评论 0 1
  • Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。 容器属性 1...
    sullay阅读 544评论 0 2
  • 一、概述 网格布局(Grid)是最强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做...
    为光pig阅读 632评论 0 13