时间戳

首页 > 解决方案 > 特定分数对齐中心

css-grid - 特定分数对齐中心

问题描述

我有一个复杂的布局可以用 css 网格复制。如果您在全屏中看到它，“Top Banners” div 设置为 1200 像素的最大宽度，并且左右边距自动对齐中心。

在网格中，我设置了 5 个分数。最后一列部分必须为 330px。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>

标签： css-grid

解决方案

推荐阅读