У меня есть сложный макет, который нужно воспроизвести с помощью сетки css. Если вы видите его в полноэкранном режиме, для div «Top Banners» задана максимальная ширина 1200 пикселей, а поле слева и справа автоматически выравнивается по центру.
В сетке я установил 5 дробей. доля последнего столбца должна быть 330 пикселей. Main_container должен иметь максимальную ширину 1200 пикселей и выровнен по центру. Остальные фракции столбца должны занимать остальное пространство. Часть боковой панели всегда должна располагаться справа.
Проблема в том, что верхние баннеры и основное содержимое не выровнены по центру. Я считаю, что верхние баннеры имеют правильное выравнивание. Вот что я сделал. Может ли кто-нибудь подсказать мне, как получить правильный макет? Спасибо.
Вот как это выглядит Изображение
И вот что я сделал. Может ли кто-нибудь подсказать мне, как добиться правильного макета? Спасибо.
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
html {
font-size: 62.5%;
font-family: "Roboto", sans-serif;
}
body {
font-size: 1.6rem;
}
/* **GRID LAYOUT** */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr) 330px;
grid-template-rows: repeat(6, max-content);
grid-auto-rows: max-content;
background-color: #f3f3f3;
}
header.top_banners {
grid-column: 1/-1;
background-color: beige;
}
header.top_menu {
grid-column: 1/-1;
background-color: blueviolet;
}
.skin_left {
grid-column: 1/2;
background-color: chocolate;
}
main.main_container {
grid-column: 2/5;
max-width: 1200px;
}
section.section_main_top_articles {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, auto);
column-gap: 1.8rem;
}
.top_articles_image {
grid-row: 1/-1;
grid-column: 1/3;
background-color: darkcyan;
}
.top_articles_articles {
grid-row: 1/-1;
grid-column: 3/4;
background-color: darkgrey;
}
aside.sidebar {
grid-column: 5/-1;
background-color: darkkhaki;
}
footer {
grid-column: 1/-1;
background-color: darkorange;
}
/* **TOP BANNERS** */
.top_banners_container {
max-width: 1200px;
margin: 0 auto;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sigmalive - Home</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,400;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="grid-container">
<header class="top_banners">
<div class="top_banners_container">Top Banners</div>
</header>
<header class="top_menu">Top Menu</header>
<div class="skin_left">Skin Left</div>
<main class="main_container">
<section class="section_main_top_articles">
<div class="top_articles_image">Main Top Articles Image</div>
<div class="top_articles_articles">Main Top Articles Articles</div>
</section>
</main>
<aside class="sidebar">Sidebar</aside>
<footer>
Footer
</footer>
</div>
</body>
</html>