為什么我的標簽會跳出網格區域？

Question

我有一個學校項目，我正在嘗試制作這個網站，但我的 html 標簽只是跳到 css-grid 之外。 我怎樣才能解決這個問題？ 請記住，我是 html/css 的新手，所以請嘗試以簡單的方式回答。

這是它的外觀圖片：

這是我的代碼：

 *{ margin: 0; padding: 0; box-sizing: border-box; } #grid_wrapper{ height: 100vh; width: 100vw; display: grid; grid-template-columns: 1fr 3fr 1fr 1fr; grid-template-rows: 100px 100px 200px 200px 1fr; grid-template-areas: "hdr hdr hdr nav" "img img img img" "img img img img" "img img img img" "asd art art asd"; } #rubrik{ grid-area: hdr; background-color: blue; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Välkommen till Härmanö</title> <link rel="stylesheet" href="css/style_start.css"> </head> <body> <div id="grid_wrapper"> <header id="rubrik"> <h1>Välkommen till Härmanö</h1> </header> </div> </body> </html>

Answer 1

您的問題與“asd”區域有關。

他們有相同的名字，但他們並不相鄰。

您可以通過更改這些區域名稱來修復它。

grid-template-areas:    "hdr hdr hdr nav"
                        "img img img img"
                        "img img img img"
                        "img img img img"
                        "asd1 art art asd2";

為什么我的標簽會跳出網格區域？

問題描述

1 個解決方案

解決方案1
0 已采納 2022-02-14 21:21:23

為什么我的標簽會跳出網格區域？

問題描述

1 個解決方案

解決方案1 0 已采納 2022-02-14 21:21:23

解決方案1
0 已采納 2022-02-14 21:21:23