grid网格布局-初级

最新推荐文章于 2025-07-04 17:23:59 发布

W_325424

最新推荐文章于 2025-07-04 17:23:59 发布

阅读量285

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 CSS布局框架 Grid

本文链接：https://blog.youkuaiyun.com/W_325424/article/details/86646990

前端同时被 3 个专栏收录

5 篇文章

订阅专栏

CSS布局

2 篇文章

订阅专栏

框架

2 篇文章

订阅专栏

eg.grid.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script></script>
    <link rel="stylesheet" type="text/css" href="grid.css">
</head>
<body>
<div class="container"><!--网格父元素，也是网格容器-->
    <div class="item item1">JAVA
    <p>JAVA-设计模式</p><!--网格子元素-->
    </div>
    <div class="item item2">C</div>
    <div class="item item3">PYTHON</div>
</div>
</body>
</html>

grid.css

.container{
    display: grid;
    grid-template-columns: 400px 1fr 1fr;/*设置网格轨道，为网格设置列的大小,fr是将剩余的空间分成两份进行平均分配*/
    grid-template-rows: 300px 1fr;/*设置网格轨道，为网格设置行的大小*/
    grid-column-gap:10px;/*网格单元间距*/
    grid-row-gap:15px;
    justify-items:center;/*在一行的某个单元格里进行水平居中，参数有start：左侧对齐；end：右侧对齐;center:居中；stretch：填满*/
    align-items:center;/*在一列的某个单元格里进行垂直居中，参数和justify一样*/
    /*当你的网格比网格容器还小时，可以使用justify-content和align-content进行操作，参数比上述的多了space-around：上下两端放置一半的空间；space-between:上下两端没有空间；space-evenly:上下两端放置一个均匀的空间*/
}
.item1{
    grid-column:1/2;/*在某个单元格里面进行划分单元格*/
    grid-row: 1/3;
}

效果：