Set grid gap using CSS property

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="top container">
  <h1>The gap Property</h1>
  <p>
    Use the <em>gap</em> property to specify the size of the gap between the
    rows and the columns.
  </p>
  <p>This grid has a 50px gap between the rows and between the columns:</p>

  <div class="grid-container">
    <div class="grid-item item1">Item 1</div>
    <div class="grid-item item2">Item 2</div>
    <div class="grid-item item3">Item 3</div>
    <div class="grid-item item4">Item 4</div>
    <div class="grid-item item5">Item 5</div>
    <div class="grid-item item6">Item 6</div>
  </div>

  <hr />

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

CSS

html,
body {
  color: #454545;
}

.top.container {
  margin-top: 5% !important;
}

/* Make the parent container a grid */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  grid-template-rows: 100px 200px; /* 2 rows with different heights */
  gap: 10px; /* space between items */
  padding: 20px;
}

/* Style for the grid items */
.grid-item {
  background-color: #4caf50;
  color: white;
  text-align: center;
  font-size: 20px;
  padding: 20px;
}

/* Optionally style items differently for demonstration */
.item1 {
  background-color: #f1c40f;
}
.item2 {
  background-color: #e74c3c;
}
.item3 {
  background-color: #3498db;
}
.item4 {
  background-color: #9b59b6;
}
.item5 {
  background-color: #2ecc71;
}
.item6 {
  background-color: #e67e22;
}

/* Make the parent container a grid */

.grid-container-named {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* Three columns */
  grid-template-rows: 150px 1fr 150px; /* Three rows */
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 10px;
  padding: 20px;
}

/* Define the areas */
.header {
  grid-area: header;
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}
.sidebar {
  grid-area: sidebar;
  background-color: #2ecc71;
  color: white;
  padding: 20px;
}
.main {
  grid-area: main;
  background-color: #f1c40f;
  color: black;
  padding: 20px;
}
.aside {
  grid-area: aside;
  background-color: #9b59b6;
  color: white;
  padding: 20px;
}
.footer {
  grid-area: footer;
  background-color: #e67e22;
  color: white;
  padding: 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .grid-container-named {
    grid-template-columns: 1fr; /* Stack items on smaller screens */
  }
}