pure-css
  1. pure-css-grid
PreviousNext

Pure CSS Grid

  • Pure CSS Grid is a responsive grid system that allows you to create custom layouts for your web pages or applications quickly and easily.
  • It is a flexible and robust tool that can help you create beautiful designs without the need for extensive coding.

Use

Pure CSS Grid is used to create responsive layouts that look great on any device, whether it's a desktop computer, a tablet, or a smartphone. You can create columns and rows of varying sizes that can be adjusted based on the screen size, making your designs more flexible and adaptable.

Advantage

The main advantage of Pure CSS Grid is its simplicity. It is easy to understand and requires minimal coding, making it an ideal choice for both beginner and experienced developers. Additionally, since it is built with CSS, it is fast and lightweight, contributing to a better user experience.

Example

Here is an example of using Pure CSS Grid to create a simple two-column layout.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
  <style>
    .grids-example {
      background: rgb(250, 250, 250);
      margin: 2em auto;
      font-family: Consolas, 'Liberation Mono', Courier, monospace;
      text-align: center;
    }

    .grid-unit {
      margin: 0.25em 0;
      padding-left: 4.5em;
    }

    .grid-unit .grid-unit-width {
      font-family: Consolas, 'Liberation Mono', Courier, monospace;
    }

    .grid-unit-bar {
      height: 2em;
      background: lightgreen;
    }
  </style>
</head>

<body>
  <div class="grids-example">
    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">1-5</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-1-5"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">2-5</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-2-5"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">3-5</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-3-5"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">4-5</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-4-5"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-1"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-1</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-1-1"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</body>

</html>
Try Playground

Example-2

We are working on building tools to allow people to customize Pure Grids.

<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
  <style>
    .grids-example {
      background: rgb(250, 250, 250);
      margin: 2em auto;
      text-align: center;
    }

    .grid-unit {
      margin: 0.25em 0;
      padding-left: 4.5em;
    }

    .grid-unit-bar {
      height: 2em;
      background: green;
    }
  </style>
</head>

<body>

  <div class="grids-example">
    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">1-24</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-1-24"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">1-12</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-1-12"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">2-24</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-2-24"></div>
        </div>
      </div>
    </div>

    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">3-24</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-3-24"></div>
        </div>
      </div>
    </div>
    ....
    ......

    <div class="grid-unit  pure-g">
      <div class="grid-unit-width pure-u">24-24</div>
      <div class="grid-unit-details pure-u-1">
        <div class="pure-g">
          <div class="grid-unit-bar pure-u-24-24"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
Try Playground

Summary

Pure CSS Grid is an easy-to-use tool that allows you to create responsive layouts for your web pages or applications quickly and easily. It provides flexibility and adaptability, making it a great choice for designing pages that look great on any device. Give it a try in your next project and see how it can help you improve your designs.

IconsMenus
Published on: