全面了解 Grid 布局

grid 布局简介

Grid 布局是一种用于网页布局的 CSS 技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素，是一个强大的布局方式。

容器属性
Grid 布局需要在父容器上设置 display 属性为 grid 或 inline-grid，以表明它们包含网格项。
行列定义
使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如，grid-template-columns: 100px 1fr 2fr;表示有 3 列，第一列宽度为 100 像素，第二列占据可用空间的 1/3，第三列占据可用空间的 2/3。
网格间距
可以使用 grid-column-gap 和 grid-row-gap 属性定义网格项之间的间距。
网格定位
使用 grid-column 和 grid-row 属性将网格项放置到特定的单元格中。例如，grid-column: 1 / 3;表示该项横跨第一列和第二列。
网格跨度
使用 grid-column-span 和 grid-row-span 属性，使网格项横跨多个列或多个行。
网格对齐
可以使用 justify-items、align-items、justify-content 和 align-content 属性对网格项进行水平和垂直方向上的对齐。
子元素的自动流动
如果没有指定网格位置，则子元素将按照其在文档中出现的顺序自动流动到网格中。

主要属性详解

Grid 布局是一种二维网格布局，允许开发人员以行和列的方式定义整个页面的布局。下面是 Grid 布局中最重要的一些属性及其用法：

display: grid; - 用于将一个元素转换为 Grid 容器。

.container {display: grid;
}

grid-template-columns 和 grid-template-rows - 用于定义网格容器的列和行的大小、数量和类型。

.container {display: grid;grid-template-columns: 100px 200px 50px;grid-template-rows: auto 100px;
}

grid-gap - 用于设置单元格之间的间距。

.container {display: grid;grid-gap: 10px;
}

grid-row-start, grid-row-end, grid-column-start, 和 grid-column-end - 用于定义单元格的位置。

.item {grid-row-start: 2;grid-row-end: 4;grid-column-start: 1;grid-column-end: 3;
}

grid-template-areas - 用于定义命名区域，从而更方便地定位元素。

.container {display: grid;grid-template-areas:'header header header''sidebar main main''footer footer footer';
}.header {grid-area: header;
}.sidebar {grid-area: sidebar;
}.main {grid-area: main;
}.footer {grid-area: footer;
}

justify-items 和 align-items - 用于在单元格中对齐内容。

.container {display: grid;justify-items: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

place-items - 用于同时定义水平和垂直对齐方式。

.container {display: grid;place-items: center;
}

justify-content 和 align-content - 用于在网格容器中对齐所有单元格。

.container {display: grid;justify-content: center; /* 水平居中 */align-content: center; /* 垂直居中 */
}

place-content - 用于同时定义网格容器内的水平和垂直对齐方式。

.container {display: grid;place-content: center;
}

全面了解 Grid 布局相关推荐

前端每日实战：143# 视频演示如何用 CSS 的 Grid 布局创作一枚小松鼠邮票
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YOoXpv 可交互视频此视频是可 ...
带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
[转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的&l ...
Grid布局和Flex布局
Flex布局(弹性布局) Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器.flex ...
ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性
稿件来源:阿里云开发者社区(点击下面"了解更多"查看原文) CSS Grid 可以将元素放入有行和列的网格中,从而让创建二维布局成为可能.有了它,你可以自定义网格的任何形态,例如网 ...
display属性_前端基础：Grid 布局教程，重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...
css grid布局
最近在学习css grid布局,为了避免以后忘记了难得查资料,遍写在博客中方便以后查询! 1,display属性 display有三个值, grid :生成一个块级网格 inline-grid :生成 ...
grid布局浏览器兼容_CSS Grid布局尝试
先看思维导图起步首先搭好基本的结构 <div id="container"><div class="item item-1">1&l ...
Css网格布局-Grid布局
Grid 概念 Grid布局是一种二维布局方法,能够在行和列中布置内容.因此在任何网格中都有两个轴,横轴(即行轴,内联)和纵轴(即列轴,块). 什么是网格网格是一组相交的水平线和垂直线,它定义了网格 ...
前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频此视频是可 ...

全面了解 Grid 布局

grid 布局简介

主要属性详解

全面了解 Grid 布局相关推荐

最新文章

热门文章