css-grid

CSS Grid

• CSS Grid is a two-dimensional layout system in CSS. It is used to arrange elements into rows and columns.

• It helps us create complex web page layouts easily.

CSS Grid Properties

display: grid - This property converts an element into a Grid Container.
grid-template-columns - This property defines the number and size of columns.
grid-template-rows - This property defines the height of rows.
gap - The gap property creates space between grid items.

grid-column - This property controls where an item starts and ends across columns.
minmax() - defines a minimum and maximum size.

auto-fit and auto-fill - These are commonly used for responsive grids.

code

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 200px;
    gap: 20px;
    grid-template-columns: repeat(
        auto-fit,
        minmax(200px, 1fr)
    );
}

Grid Vs Flexbox

• Flexbox is mainly a one-dimensional layout system, which arranges elements either in a row or a column.

• CSS Grid is a two-dimensional layout system, which arranges elements in both rows and columns.

Flexbox → One direction: row or column
Grid → Two directions: rows and columns