css 我不知道如何正确设置网格容器

fwzugrvs 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(125)

我有一个问题，我不能得到我的头周围。我是一个流浪汉。基本上我有这个代码：

<style>
.grid-container {
    height: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
    "text text ."
    "text text text"
    "text text text";
     
}

#myText {
    grid-area: 1 / 1 / 3 / 3;
}
</style>
</head>

<body>
<div class="grid-container">
         <div id="myText"></div>
          <img src="Images/grad3.png">
    </div>
</body>

我需要一个如下所示的网格容器：
正文|正文|图像
正文|正文|正文
正文|正文|正文
由于某些原因，这段代码的文本只显示在前2列，而不是在“方块”下面的图像。2如果有任何人愿意提供帮助，将不胜感激！
我试着改变值，整个代码，谷歌的东西，但由于某种原因没有工作。

css

来源：https://stackoverflow.com/questions/75153569/i-dont-know-how-to-set-my-grid-container-properly

1条答案

按热度按时间

nuypyhwy1#

欢迎来到SO!
您已经创建了一个3x3网格，如果希望第三个项目是图像，则必须在网格中至少放置三个项目，第三个项目是图像。
定义grid-template-areas时，必须将定义的名称分配给网格中的特定项，否则该属性将不起作用。
看看Grid by Example，它有一个详细的示例列表供您尝试...

* { box-sizing: border-box }

body { margin: 0; padding: 0.5rem }

.grid-container {
    height: 1100px; /* don't use fixed units */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

    gap: 0.5rem;

/* grid-template-areas has no effect when you don't assign them to an item */

/*
    grid-template-areas: 
    "text text ."
    "text text text"
    "text text text";
*/
}

.myText {
    background-color: #f4f4f4;
    border: 1px solid Gray;

    /* For easy centering of content */
    display: grid; place-items: center;
    padding: 1rem;
}

/* To scale the image */
img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

<div class="grid-container">
    <div class="myText">in a 3x3 grid, you need to define 9 elements</div>
    <div class="myText">text 1</div>
    <img src="https://picsum.photos/200/356?random">
    <div class="myText">text 2</div>
    <div class="myText">text 3</div>
    <div class="myText">text 4</div>
    <div class="myText">text 5</div>
    <div class="myText">text 6</div>
    <div class="myText">text 7</div>
</div>

赞(0）回复(0）举报 2023-01-18

我来回答

css 我不知道如何正确设置网格容器

1条答案

相关问题

热门标签

最新问答