Я пытаюсь создать лучшую отзывчивую страницу, хотя я борюсь с двумя сетками.
Мне нужно, чтобы плитки, в которых указывалось различное питание, расширялись, когда страница расширяется по вертикали, и чтобы нижние зеленые плитки оставались внизу, пока они продолжают прыгать вверх, и я не могу понять, почему.
На изображении ниже показаны проблемы, с которыми я столкнулся.
Приведенный ниже код показывает введение в страницу CSS
*{
box-sizing: border-box;
}
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-rows: 100px [nav-start] auto 125px [nav-end];
grid-template-columns: [header-start] minmax(200px, 2fr) 10fr [header-end];
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-column: header-start / header-end;
background-color: navy;
}
nav {
grid-row: nav-start / nav-end;
background-color: slategrey;
}
content {
background-color: white;
}
footer {
background-color: #726a6a;
}
.container {
height: 10%;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 5px 5px;
padding: 5px;
}
.cell {
color: white;
font-size: 1.5rem;
text-align: center;
padding: 1rem;
line-height: 25px;
.cell-1 {
background: brown;
}
.cell-2 {
background: brown;
}
.cell-3 {
background: brown;
}
.cell-4 {
background: black;
}
.cell-5 {
background: black;
}
.cell-6 {
background: black;
}
.cell-7 {
background: orange;
}
.cell-8 {
background: orange;
}
.cell-9 {
background: orange;
}
.cell-10 {
background: maroon;
}
.cell-11 {
background: maroon;
}
.cell-12 {
background: maroon;
}
.cell-13 {
background: lightblue;
}
.cell-14 {
background: lightblue;
}
.cell-15 {
background: lightblue;
}
.cell-16 {
background: tan;
}
.cell-17 {
background: tan;
}
.cell-18 {
background: tan;
}
.cell-19 {
background: green;
}
.cell-20 {
background: green;
}
.cell-21 {
background: green;
}
.cell-22 {
background: gold;
}
.cell-23 {
background: gold;
}
.cell-24 {
background: gold;
}
.cell-25 {
background: coral;
}
.cell-26 {
background: coral;
}
.cell-27 {
background: coral;
}
.cell-28 {
background: maroon;
}
.cell-29 {
background: maroon;
}
.cell-30 {
background: maroon;
}
.cell-31 {
background: blueviolet;
}
.cell-32 {
background: blueviolet;
}
.cell-33 {
background: blueviolet;
}
.cell-34 {
background: navy;
}
.cell-35 {
background: navy;
}
.cell-36 {
background: darkgreen;
}
Следующий бит кода показывает приправы / надстройки (салат, помидор, лук и т. Д.). Эта часть прыгает ближе к вершине.
.container2 {
height: 10%;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 5px 4px;
padding: 5px;
}
.cellb {
color: white;
font-size: 1.5rem;
text-align: center;
padding: .5rem;
}
.cell-1a {
background: teal;
}
.cell-2a {
background: teal;
}
.cell-3a {
background: teal;
}
.cell-4a {
background: teal;
}
.cell-5a {
background: teal;
}
.cell-6a {
background: teal;
}
.cell-7a {
background: teal;
}
.cell-8a {
background: teal;
}
.cell-9a {
background: teal;
}
.cell-10a {
background: teal;
}
Я на правильном пути, думая, что мне нужно поиграть с измерением grid-template-rows или это что-то еще?