QP School

Full Version: How to make a grid layout with CSS3
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Example:

<!DOCTYPE html>
<html>
<head>
  <title>Grid Layout Example</title>
  <style>
    /* Apply grid layout to the container element */
    .container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-gap: 10px;
    }
    /* Apply grid items */
    .item {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

Explanation:

CSS Grid Layout is used for creating complex grid-based designs. In this example, the container class is a grid container with the property display: grid. The grid-template-columns property sets the columns to repeat three times with a width of 100 pixels each, and grid-gap adds a 10-pixel gap between grid items. The item class represents the grid items with a width and height of 100 pixels and a light blue background color.