Grid Back
Like Flexbox, Grid is another kinds of CSS layout technics for defining responsive layouts conveniently. Since Chrome 87, we can also easily debug CSS Grid layouts with dev tools when a DOM element is set with display: grid or display: inline-grid.
When a container has been set with grid layouts, it is easy for children elements to define their position with grid-column and grid-row. For example, assume that there is a container that has been split into 3 columns of grids of which each width is equal on average:
.container {
display: grid;
grid-template-columns: repeat(3, auto);
}Then we can easily use this layout like this:
See the Pen eYgrBVa by aleen42 (@aleen42) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>