CSS Grid Layout (aka “Grid”), is a two-dimensional layouting system that uses a series of containers, rows, and columns to layout and align content. Below are examples and an in-depth look at how the grid comes together.
The grid layout consists of different components that helps defining your layout in two dimensional aspects, these components are:
Grid container: The main element that controls the layout structure, columns, rows, and the gap between them
Grid item: The children of the grid container.
Grid columns: The vertical container for children elements within the grid layout
Grid rows: The horizontal container for elements within the grid layout
Grid area: A space consists of columns and rows within the grid, and is controlled by the child element itself
Column gap: The space between vertical containers which corresponds to one of our spacing values
Row gap: The space between horizontal containers which also corresponds to one of our spacing values
The main difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layouts in one dimension - either a row or a column.
Grid was designed for two-dimensional layout rows, and columns.
According to WCAG C27 technique, the dom order must match the visual order.
The grid can re-order it's content in various ways through the order css property on grid items, this changes the visual order but the dom order stays the same, hence,
keyboard navigation and focus order maybe affected.
Set the correct order of the elements with tabindex attribute to avoid accessibility issues.