#html #css
Вопрос:
Я не могу заставить свой элемент div охватывать несколько столбцов в сетке CSS. Что я сделал не так?
.main {
display: grid;
grid-template-areas: "a b"
"c c";
grid-template-rows: 100px 100px;
grid-template-columns: 200px 150px;
} <body>
<div class="main">
<div id=a>
<p>
This is the content of box A.
</p>
</div>
<div id=b>
<p>
This is the content of box B.
</p>
</div>
<div id=c>
<p>
This is the content of box C.
</p>
</div>
</div>
</body> Вот изображение вывода приведенного выше кода.:
Ответ №1:
Вам необходимо явно указать область сетки, к которой принадлежит элемент.
#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }