0925作业2-grid-layout

最新推荐文章于 2022-11-22 20:58:04 发布

转载最新推荐文章于 2022-11-22 20:58:04 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dedao97/p/9704272.html

本文深入讲解CSS Grid布局的使用方法，包括grid-template-columns属性、fr单位的弹性网格轨道创建、repeat函数的应用，以及如何设置网格项目的宽高和间距。通过实际代码示例，展示如何创建响应式网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

grid-template-columns:默认值为none像行一样，通过grid-template-columns指定的每个值来创建每列的列宽

fr:fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

repeat:使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Document</title>
<style type="text/css"> //连接css
.wrapper{
display: grid; //通过display属性设置属性值为grid
grid-template-columns:repeat(3,1fr);
grid-gap: 500px; //只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同500px
grid-auto-rows:

}
.first{
border: 10PX solid black; //设置第一部分边框10px 黑色
grid-column:1/5; //设置宽1-5

grid-row:1/3; //设置高度1-3
background: red; //背景色红色

}
.second{
border: 10PX solid red; //设置第二部分边框10px 红色
grid-column:1/3; //宽度1-3
grid-row:2/5; //高度2-5
background: black; //背景色黑

}
.third{
border: 10PX solid green; //设置第三部分边框10px 绿色
grid-column:3/5; //宽度3-5
grid-row:2/5; //高度2-5
background: blue; 背景色蓝
}
</style>
</head>
<body>
<div class="wrapper">
<div class ="first">a</div>S
<div class="second">b</div>
<div class="third">c</div>
</div>
</body>
</html>