首页 > 试题广场 >

display - grid - 区域

[编程题]display - grid - 区域

热度指数：2272 时间限制：C/C++ 3秒，其他语言6秒空间限制：C/C++ 256M，其他语言512M
算法知识视频讲解

网格布局允许指定区域，一个区域由单个或多个单元格组成。根据上一节学习的内容，请将"section"设置为网格布局容器，并且生成一个3x3的网格，该网格容器项的宽度、高度都为100px。再给容器添加"grid-template-areas: 'a b c''d e f''g h i'"属性，表示3x3的网格区域划分从左到右、从上到下依次为a、b、c、d、e、f、g、h、i。现在给第一个"article"标签设置"grid-area: e"属性，此时可以看到数字1已经被移动到了最中间的区域，即区域"e"。
进入下一节的学习吧。

算法知识视频讲解

HTML/CSS/JavaScript

huaxifn

section {
    text-align: center;
    display:grid;
    grid-template-rows:100px;
    grid-template-columns:repeat(3,100px);
    grid-template-areas: 'a b c''d e f''g h i';
}
article {
    height: 100px;
    border: 1px solid black;
}
article:first-child{
    grid-area: i;
}

发表于 2022-02-10 16:11:29 回复(0)

HTML/CSS/JavaScript

小hu同学

section {
text-align: center;
display:grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-template-areas: 'a b c''d e f''g h i';
}
article {
height: 100px;
border: 1px solid black;
}
article:nth-child(1){
grid-area:e;

}

将 grid-area:e 写到article里面样式全部挤到了一起，但是还可以过牛客提交，就离谱

发表于 2021-12-26 19:58:56 回复(0)

xiniun-

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                text-align: center;
                display: grid;
                grid-template-rows: repeat(3,100px);
                grid-template-columns: repeat(3,100px);
                grid-template-areas: 'a b c'
                                     'd e f'
                                     'g h i';
                
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
            article:nth-child(1) {
                grid-area: e;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
</html>

发表于 2022-09-11 10:37:36 回复(0)

HTML/CSS/JavaScript

讲文明的海豚天天摸鱼

    section {
        text-align: center;
        grid-template-rows: 100px;
        grid-template-columns: repeat(3, 100px);
        grid-template-areas: 'a b c' 'd e f' 'g h i';
    }

    article {
        height: 100px;
        border: 1px solid black;
    }

    article:nth-child(1) {
        grid-area: e;
    }

发表于 2022-04-20 08:59:46 回复(0)

HTML/CSS/JavaScript

写前端的刻猫猫

section {
    text-align: center;
    width:100px;
    height:100px;
    grid-template-areas: 'a b c''d e f''g h i;
}
article {
    grid-area: e;
    height: 100px;
    border: 1px solid black;
}

发表于 2021-12-21 21:03:06 回复(0)