Я изучаю CSSGrid, и мне требуется, чтобы в адаптивном представлении виджеты были выровнены по центру, но я не могу этого сделать.
Это мой код:
grid-template-areas: "header header header"
"contenido contenido sidebar"
"widget-1 widget-2 sidebar"
"footer footer footer";
.contenedor .sidebar {
/* grid-column: 3/4; */
background: #faa43d;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
/* grid-row: span 2; */
min-height: 100px;
grid-area: sidebar;
}
.contenedor .widget-1,
.contenedor .widget-2 {
background: #55a8fd;
color: white;
height: 100px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.contenedor .widget-1 {
grid-area: widget-1;
}
.contenedor .widget-2 {
grid-area: widget-2;
}
Я использую медиа-запрос для адаптивного представления, где я указываю, что класс "contenido" занимает 3 столбца, а также боковую панель, но проблема в том, что виджет использует 2 столбца, поэтому он не занимает 3 столбца моей таблицы. Я могу решить эту проблему, используя точку в медиа-запросе в области виджета.
Но я не знаю, как их центрировать, поскольку точка занимает пространство, которое будет 3-м, поэтому оно не позволяет мне центрировать их
@media screen and (max-width: 768px){
.contenedor {
grid-template-areas:
"header header header"
"contenido contenido contenido"
"sidebar sidebar sidebar"
"widget-1 widget-2 ."
"footer footer footer";
}
}
Прикрепленное изображение того, как это выглядит, когда приходит медиа-запрос. Спасибо.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Layout CSS-GRID</title>
</head>
<body>
<div class="contenedor">
<header class="header">
<h2>HEADER</h2>
</header>
<main class="contenido">
<h1>Contenido</h1>
<p>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
<br><br>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
<br><br>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
</p>
</main>
<aside class="sidebar">
<h3>Sidebar</h3>
</aside>
<div class="widget-1">
<h3>Widget 1</h3>
</div>
<div class="widget-2">
<h3>Widget 2</h3>
</div>
<footer class="footer">
<h3>FOOTER</h3>
</footer>
</div>
</body>
</html>