（6.3）网格布局 grid

grid-template-column 和 grid-template-rows

这2个属性都支持 []，它们代表给列/行之间的线的命名。

<body>
    <div class="container">
        <item>1</item>
        <item>2</item>
        <item>3</item>
        <item>4</item>
        <item>5</item>
    </div>
</body>
</html>
<style>
    .container {
    display: grid;
    grid-template-columns: 80px auto 100px;
    grid-template-rows: [1] 25% [2] 50px [3] auto [4] 60px [5];
}

item {
    background-color: deepskyblue;
    border: 1px salmon solid;
}
</style>

min-content

一排或者一列格子中所有最小内容尺寸中最大的哪个最小尺寸

网格布局专用单位fr

快速复习 grid

基本操作

1 指定3列，每列宽度100px

2 浮动宽度，(fr 剩余空间的比例)

3 第2个参数改为 2fr， 占据 1/2 的空间

4 column-gap/row-gap 列/行间距

或者这里可以 gap: 24px 统一设置。

排列元素

5 grid-template-areas

给元素设置各个的区域

6 对齐：垂直方向 align-items

这里 center 居中，end 向下。

对齐：水平方向 justify-items

居中对齐 justify-items: center

水平方向靠右对齐 justify-items: end

水平方向两端对齐 justify-items: space-between

7 行轴和列轴小于 grid 容器

垂直方向：居中对齐 aligin-content

水平方向：居中 justify-content: center

水平方法：两端对齐 justify-content: space-between

posted @ 2023-06-30 16:30  【唐】三三  阅读(29)  评论(0)    收藏  举报