使用Grid自动调整剩余空间CSS

使用了 grid-template-columns: repeat(auto-fill, 50px); 来设置每个元素的固定宽度为 50px，并使用 grid-gap: 10px; 来设置间距为 10px。Grid 布局会自动调整剩余空间，使得尽可能多地放置元素，并在放不下时平均分配剩余空间给每个间距。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 50px);
        grid-gap: 10px;
        justify-content: space-around;
    }

    .grid-item {
        background-color: lightblue;
        height: 50px;
    }
</style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
</div>
</body>
</html>

Grid布局属性列表

grid-template-rows 定义每一行的行高

grid-template-columns 定义每一列的列宽

grid-row-gap 属性设置行之间的间隔

grid-column-gap 属性设置列之间的间隔。

grid-template-areas 属性将对所有网格进行命名规划，对网格的命名规划会影响到网格线的命名，网格起始位置的网格线为'网格名称-start'，网格结束位置网格线为'网格名称-end'
justify-items属性设置网格中内容在水平方向上的的位置。

align-items属性设置网格中内容在垂直方向上的的位置。

place-items属性是justify-items和align-items的简写形式，只写一个值时表示两个值相同。

可以用这4个属性来单独指定某一个网格的位置

grid-column-start表示网格左边框所在的垂直网格线

grid-column-end属性表示网格右边框所在的垂直网格线

grid-row-start属性表示网格上边框所在的水平网格线

grid-row-end属性表示网格下边框所在的水平网格线

grid-area属性直接指定某个网格位于哪一个命名区域

评论列表
0/1000
共 0 评论