在CSS中设置网格？

Question

我是CSS和HTML的新手，并且在CSS中设置了DIVS，类似的是：

#topBar {
  margin-top: 0;
  height: 100px;
  width: 100%
}

#sideBar {
  width: 50px;
  margin-left: 0;
  margin-top: 100px;
  height: 100%;
}

#main {
  margin-left: 50px;
  margin-top: 100px;
  margin-bottom: 50px;
}

#footer {
  margin-bottom: 0;
  width: 100%;
}

<div id="container">
  <div id="topbar" />
  <div id="sidebar" />
  <div id="main" />
  <div id="footer" />
</div>

但这看起来不像我想要的。即使它们的空间仅限于x宽度和x高度，它也会为每个div留出空间。

我该如何设置Divs以应有的需求？即CSS中有一个页脚，主，侧边栏和Topbar？

Answer 1

CSS实际上具有您可以使用的网格“构建器”内置。我不久前就在做类似的事情，最终这样做了：

#container {
    display: grid; //uses grid
    height: 100vh; // vh and vw is percentages of the screens width and height, nice for scaling for different devices
    width: 100vw;
    grid-template-columns: 1fr 9fr; // sets how big columns are, this sets the column quantity to two, and the first one gets 1 fraction of the are, and column two gets 9 fractions. 1fr is for sidebar
    grid-template-rows: 1.5fr 15fr 3fr; // Same as with column, but this includes footer, so 1.5 fraction goes to top bar, 15 fractions to sidebar and main area, and 3 fractions to footer
    grid-template-areas:
    "header header" // sets area to use, the same area given space in above lines. They can be directly referenced in other parts of the css documents.
    "navbar main"
    "footer footer";
}

#topbar {
    grid-area: header; // Referencing previous made areas
    display: flex; // I used this to make the top bar, as this would align the items in the bar horizontally with same amount of space between
    justify-content: space-between;
    align-items: center; //used this to center items vertically
}

#sidebar {
    grid-area: sidebar;
    text-align: center; // used this to align the text center horizontally
}

#main {
    grid-area: main;
}

#footer {
    grid-area: footer;
}

Answer 2

您应该使用语义标签，例如header，nav，旁边，footer and code> main main < /代码>。

然后将网格直接应用于身体元件，而不是将它们包裹在额外的容器中：

body {
  margin: 0; /* removes default margin */
  display: grid; /* uses grid */
  min-height: 100vh; /* will expend the grid to the entire viewport */
  grid-template-columns: 1fr 2fr; /* sets the column width and amount */
  grid-template-rows: min-content auto min-content; /* sets the row height to push the footer at the bottom and let the main fill the rest */
  gap: 5px; /* placing the items apart */
}

header,
footer {
  grid-column: 1 / -1; /* letting those element span the entire row */
}

/* for styling purpose only */
header,
aside,
main,
footer {
  border: 2px dashed red; 
  display: flex; 
  justify-content: center;
  align-items: center;  
  padding: 10px;
}

<header>Topbar</header>
<aside>Sidebar</aside>
<main>Main</main>
<footer>Footer</footer>