CSS样式grid布局

最新推荐文章于 2025-06-06 13:11:11 发布

明哥前端

最新推荐文章于 2025-06-06 13:11:11 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：前端 css css3 gridview

本文链接：https://blog.youkuaiyun.com/weixin_55876727/article/details/121566654

css 专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS对列表进行样式设计，包括设置无序列表的样式、调整网格布局以及利用grid-template-columns和grid-template-rows属性创建响应式网格。通过实例展示了如何使用CSS选择器改变特定列表项的背景颜色，以及利用grid-gap和grid-auto-flow属性实现间距和智能填充。此外，还探讨了grid-template-areas在定义区域和元素布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

</html>

CSS

* {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul {
    width: 500px;
    height: 500px;
    border: 10px solid yellow;
    display: grid;
    /* repeat(4,100px) */
    /* 基于横c竖r  repeat第一个参数是设置几排几列，第二个参数是设置每排每列的尺寸 */
    /* grid-template-columns设置横向的单元格的宽度，有多少个宽度就有多少列 */
    /* grid-template-rows设置竖向的单元格的长度，有多少个长度就有多少行 */
    /* grid-template-columns: repeat(auto-fill, 100px); auto-fill可以使单元格自动充满行或者列 */
    /* grid-template-columns: repeat(3, 1fr); 将3份，将每份平均分为一等份 */
    /* minmax() 最小值最大值 */
    /* grid-template-columns: [c1] 100px [c2] 100px [c3] 100px; 可以给网格加上线段*/
    /* grid-auto-flow: column dense; 更改排列方向类似 flex-direction: column; dense智能填充 */
    /* justify-items: center; 元素在单元格中的对齐方式默认是stretch */
    /* align-items: center; justify-content: center; 与flex一致 */
    justify-items: stretch;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-auto-flow: row dense;
    /* grid-template-areas: 'a a a' 'b b b' 'c c c';定义区域名字 在子元素中使用grid-area进行调换子元素的区域 */
    grid-template-areas: 'a a a' 'b b b' 'c c c';
    /* 设置行间距 */
    /* row-gap: 20px;
    column-gap: 20px; 
    合写 gap: 20px;
    */
}

li {
    color: #fff;
    text-align: center;
}


li:nth-child(1) {
    background-color: rgb(87, 85, 85);
    /* grid-column: 1 / 4; 设置元素从第几条线到第几条线结束 */
    /* grid-row-start: span 2; 设置横竖方向上所占几个格子 */
    grid-row-start: span 2;
}

li:nth-child(2) {
    background-color: rgb(119, 18, 18);
    /* grid-column: 1 / 3; */
}

li:nth-child(3) {
    background-color: rgb(34, 65, 150);
}

li:nth-child(4) {
    background-color: rgb(190, 31, 124);
}

li:nth-child(5) {
    background-color: rgb(28, 164, 228);
}

li:nth-child(6) {
    background-color: rgb(10, 131, 131);
}

li:nth-child(7) {
    background-color: rgb(255, 0, 212);
}

li:nth-child(8) {
    background-color: rgb(22, 1, 1);
}

li:nth-child(9) {
    background-color: rgb(51, 255, 0);
}

li:nth-child(10) {
    background-color: rgb(195, 0, 255);
}