<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Магазин продажу пакетів</title>
<link rel="stylesheet" href="static/styles/style.css">
<style>
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
padding: 10px 15px;
background-color: rgb(96, 143, 204);
border: 1px solid rgb(24, 84, 133);
text-align: center;
font-size: 22px;
font-family: sans-serif;
color: #fff;
}
</style>
</head>
<body>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
2 ответа
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px 15px;
}
.elem {
border: 1px solid black;
background-color: lightblue;
text-align: center;
padding: 10px;
}
<div class="container">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
<div class="elem">4</div>
<div class="elem">5</div>
<div class="elem">6</div>
<div class="elem">7</div>
<div class="elem">8</div>
<div class="elem">9</div>
</div>
-
-
-
А не получалось у вас из-за того, что вы писали padding, вместо grid-gap. + задавали фон контейнеру в целом, а не ячейкам. Поэтому, отступов не видели, очертаний ячеек тоже 22 ноя в 17:16
ну я не знаю... может потому что смотрите с какого то сферически вакуумного ie5(который о гридах ничего не знает)
а может потому что вот тут:
<link rel="stylesheet" href="static/styles/style.css">
явно есть селектор по тяжелее(может и с !important'ом, кто знает...), который и перебивает каскад
разумеется на SO его нету, а потому он(как и результат его действия) присутствующим конечно же не виден.
grid-template-columns
...-1
- ответы у них вполне адекватные в отличие от вопроса (есть и по хуже, но можно было поработать над вопросом прежде чем его публиковать). Прежде чем публиковать такого качества вопросы - внимательно перечитайте его - будет ли он так же понятен тем кто прочтет его.