Creating a Flexbox Layout Using CSS

Code Playground is only enabled on larger screen sizes.

Just a grid layout, you can create gaps between flex items using row-gap and column-gap.

row-gap adds spacing between rows, and column-gap adds spacing between columns:

css

.container {
  display: flex;
  flex-flow: row wrap;
 
  row-gap: 10px;
  column-gap: 20px;
}

The gap property is a shorthand property with the following syntax:

css

.container {
  display: flex;
  flex-flow: row wrap;
 
  gap: 10px 20px; /* row-gap column-gap */
  gap: 10px; /* all gaps */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>

</body>

</html>

Open Sandbox

Loading course content...