Grid布局常用属性梳理

news2024/9/23 17:17:29

布局属性

aligin-items

作用：CSS align-items 属性设置了所有直接子元素的 align-self 值作为一个组。在 Flexbox 中，它控制子元素在交叉轴上的对齐。在 Grid 布局中，它控制了子元素在其网格区域内的块向轴上的对齐。
应用对象：影响网格容器内的所有网格项目。
值：normal、start、end、center、stretch、baseline 等。
示例：设置 align-items: center; 会使所有网格项目在容器的垂直方向上居中对齐。normal与stretch类似，如果不设任何值，默认normal

<div class="grid-container">
    <div class="grid-item grid-h-50">内容1</div>
    <div class="grid-item">内容2</div>
    <div class="grid-item">内容3</div>
    <div class="grid-item">内容4</div>
    <div class="grid-item grid-h-30">内容5</div>
    <div class="grid-item  grid-bottom-4">内容6</div>
</div>

.grid-container {
    display: grid;
    overflow: hidden;
    border: 1px solid #ccc;
    margin-top: 10px;
    font-size: 12px;
    grid-template-columns: repeat(4, calc(100% / 4));
    align-items: normal;
    /* align-items: stretch; */
}
.grid-item{
    border: 1px solid #ccc;
    /* margin-bottom: 12px; */
    /* width: 100%; */
    background: lightblue;
}

.grid-h-30 {
    height: 30px;
    background: lightpink;
}

.grid-h-50 {
    height: 50px;
    background: lightyellow;
}

效果展示如下，每行子元素的高度做了strech，保证行内各元素高度相同
在这里插入图片描述
将布局改为align-items: center;,可以看到子元素高度没有撑高，元素在每行内垂直居中。

align-content

align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

通常，如果不设置grid 容器的高度，容器高度由子元素的高度决定，如上面的例子那样外层容器高度为内容1【h: 50】和内容5【h:30】之和80。此时设置align-content属性没有意义。如果将grid container的高度设置的更大一些，这个时候align-content将发挥其作用。

.grid-container {
    display: grid;
    overflow: hidden;
    border: 1px solid #ccc;
    margin-top: 10px;
    font-size: 12px;
    grid-template-columns: repeat(4, calc(100% / 4));
    align-items: center;
    height: 150px;
    align-content: center;
}

改变对应属性值，可以查看相应的布局效果。线上演示
在这里插入图片描述

justify-items

CSS 的 justify-items 属性为所有盒中的项目定义了默认的 justify-self ，可以使这些项目以默认方式沿适当轴线对齐到每个盒子。线上演示
在这里插入图片描述

grid布局中，justify-items统一设置每个网格项目中的布局，其属性设在网格容器上，如果单独为某一网格单独设置布局，则在网格项目上设置justify-self属性。

 display: grid;
    width: 600px;
    border: 1px solid #ccc;
    margin-top: 10px;
    font-size: 12px;
    grid-template-columns: repeat(4, 100px);
    align-items: center;
    height: 150px;

图中虚线为每个网格项目，
在这里插入图片描述
在上面的示例中，如果想让第一行第四列的内容居右，可以单独为其设置

<style>
.justify-right {
    justify-self: end;
}
</style>
<div class="grid-container">
    <div class="grid-item grid-h-50">内容1</div>
    <div class="grid-item">内容2</div>
    <div class="grid-item">内容3</div>
    <div class="grid-item justify-right">内容4</div>
    <div class="grid-item grid-h-30">内容5</div>
    <div class="grid-item">内容6</div>
</div>

在这里插入图片描述

justify-content

CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。线上演示
在grid布局中，网格项目的大小如果足以填满整个容器，那么 justify-content 可能不会有可见的效果。在前面的例子中，我们设置的网格大小是容器的4等分，所以直接设置该属性，不会有任何效果。

 display: grid;
    width: 600px;
    border: 1px solid #ccc;
    margin-top: 10px;
    font-size: 12px;
    grid-template-columns: repeat(4, 100px);
    align-items: center;
    height: 150px;
    justify-content: space-evenly;