Align-self нельзя использовать в качестве дисплея: сетка не обнаружена
Я тестирую так css (css-grid), и вот код:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title></title>
<style>
html, body {
height: 100%;
}
.container {
display: grid;
height:100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"h h";
}
.header {
height: 300px;
grid-area: h;
background-color: red;
}
.box {
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
</style>
</head>
<body>
<div class = "container">
<div class = "header">
<div class = "box">Box1</div>
</div>
</div>
</body>
</html>
Если вы посмотрите на имя класса 'box' выше, вы увидите, что у него есть display: grid и align-self: center.
Когда я запускаю это, я получаю эту ошибку в консоли:
«align-self не влияет на этот элемент, поскольку он не является сеткой или элементом гибкости. Попробуйте добавить display:grid, display:flex, display:inline-grid или display:inline-flex».
Как видите display: grid is there... Почему это происходит?
Ответы 2
Он смотрит на родительский контейнер. Итак, ваш ящик является дочерним элементом «заголовка». Если вы поместите display:grid в класс CSS заголовков, вы увидите, что он работает.
.header {
height: 300px;
display:grid;
grid-area: h;
background-color: red;
}
В вашем CSS ниже:
.box{
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
.box вашего селектора div становится вашим grid-container, что означает
align-self нельзя использовать на этом, align-self используется на grid-items для выравнивания по вертикали. Свойство, которое мы используем для
контролируйте выравнивание всех grid-items из контейнера сетки align-items.
Если у родителя нет
display:grid, это не элемент сетки