Tutorials Programming Tutorials, Guides & Best Practices

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Content</main>
  <footer class="footer">Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}

.flex-item {
  background-color: lightgreen;
  padding: 10px;
  border: 1px solid #ccc;
}

• Main Axis: The primary axis along which flex items are laid out (horizontal by default).
• Cross Axis: The axis perpendicular to the main axis (vertical by default).