CSS栅格系统

yooo*

已于 2022-04-27 22:48:50 修改

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-02-11 15:45:54 首次发布

本文链接：https://blog.csdn.net/y_ooo/article/details/122882078

版权

本文详细介绍了CSS栅格系统，包括声明容器、绘制栅格行列、设置间距、定位栅格线、区域定位、栅格流动及对齐管理。通过百分比、比例划分等方式灵活控制栅格布局，同时讲解了如何利用栅格线编号、命名和偏移量进行精确控制，以及对齐方式的调整，以实现更高效的页面设计。

摘要由CSDN通过智能技术生成

文章目录

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行。

栅格系统与FLEX弹性布局有相似之处，都是由父容器包含多个项目元素的使用。由于兼容性并不强，效率也并未得到很大提升，因此目前不太普及。

在这里插入图片描述

1.声明栅格系统的容器

display: grid（块） | inline-grid（行）

article {
   
    display: grid;
    width: 300px;
    height: 300px;
    border: solid 5px silver;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

div {
   
    width: 100px;
    height: 100px;
    background: blueviolet;
    background-clip: content-box;
    border: solid 1px #ccc;
    padding: 10px;
    box-sizing: border-box;
}

<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </article>
</body>

在这里插入图片描述

2.绘制栅格行列

grid-template-rows|grid-template-columns

（1）固定宽度

article {
   
    display: grid;
    width: 300px;
    height: 100px;
    border: solid 5px silver;
	grid-template-rows: 50px 50px;
    grid-template-columns: 60px 60px 60px 60px 60px;
}