CodePath - HTML & CSS Learning Platform

Grid Layout

CSS Grid Layout offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

Try it yourself:

HTML

<h1>Hello CSS!</h1>\n<div class='box'>Style me!</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

Result