CSS基础--快速使用CSSGrid布局实现响应式设计
时间：2023-03-30 14:10:36
CSS
常用Grid布局属性介绍让我们从一个简单的Grid布局例子开始。CSSGrid布局由两个核心组件wrapper（父元素）和items（子元素）组成。wrapper是实际的网格（grid），items是网格（grid）的内容。下面是一个wrapper元素，里面包含6个item：1
2
3
4
5
6
要将包装元素变成网格（grid），只需将其显示属性设置为grid：.wrapper{display:grid;}列（columns）和行（rows）要使它成为二维网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。.wrapper{显示：网格；网格模板列：100px100px100px；grid-template-rows:50px50px;}grid-template-columns的三个值表示三列，对应的值表示列宽为100px。grid-template-rows的2个值代表两行，对应的值代表行高为50px。结果如下：我们可以改变行高和列宽看看效果。代码：.wrapper{显示：网格；网格模板列：200px50px100px；grid-template-rows:100px30px;}效果如图：我们使用和之前一样的HTML标记来放置items（子元素），为了帮助我们更好的理解，我们为每个添加了一个单独的类项目（子元素）：
1 