The CSS Grid Layout Module provides a grid-oriented layout system featuring rows and columns, simplifying web page design without necessitating floats and positioning.
While similar to flex, the grid method offers the capability to define multiple rows and position each row independently.
To implement the CSS grid method, encapsulate the <div> elements within another <div> element designated as a grid container. Additionally, specify the width of each column.
Example
“How to align <div> elements side by side using grid:”
| <style> .grid-container { display: grid; grid-template-columns: 33% 33% 33%; } </style> |
