CSS Grid

Introduction

The CSS Grid is a layout module which excels in dividing the page into major sections demarcating the link in the matter of size, position and layer, between parts of a control built from HTML primitives.

CSS grid allows authors to arrange elements in columns and rows, similar to tables. However, the CSS grid offers a wider range of layout possibilities compared to tables. It enables easier implementation of various layouts that were previously difficult to achieve using tables. For instance, child elements within a grid container can be positioned to overlap and layer, similar to CSS-positioned elements.

Example

The following example demonstrates a grid consisting of three columns. The rows in this grid are created with a minimum height of 100 pixels and a maximum height set to automatically adjust based on the content. The items within the grid are placed using line-based placement methods.