Web_Dev_Grad

The CSS Grid Layout is a two-dimensional layout system that enables developers to design complex and responsive web layouts with ease. It allows for the creation of both rows and columns, providing greater flexibility compared to one-dimensional layout systems like Flexbox. By defining a grid container and placing grid items within it, developers can control the positioning and sizing of elements in a structured manner.

To implement a grid layout, you first need to designate a container as a grid by setting its display property to grid. This transforms the container into a grid context for its direct children, known as grid items. Alternatively, using display: inline-grid; allows the grid container to behave like an inline element while still providing grid layout capabilities.

.container {
    display: grid;
    width: 500px;
    grid-template-columns: 200px 300px;
    grid-template-rows: 10% 20% 600px;
}

In this example, the .container is set as a grid with specified column and row sizes. The grid-template-columns property defines two columns with widths of 200px and 300px, respectively. The grid-template-rows property sets three rows with heights of 10%, 20%, and 600px.

CSS Grid provides a shorthand property, grid-template, to define both row and column sizes simultaneously. The syntax for this shorthand is as follows:

grid-template: row_sizes / column_sizes;

.container {
    display: grid;
    grid-template: 200px 300px / 20% 10% 70%;
}

Here, the first part (200px 300px) defines the row sizes, and the second part (20% 10% 70%) specifies the column sizes.

The fr unit represents a fraction of the available space in the grid container. It allows for flexible distribution of space among grid items.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

In this setup, the container is divided into four equal parts, with the middle column taking up twice the space of the others.

The repeat() function simplifies the creation of grids with repeating column or row sizes. For example, to create three columns each 100px wide:

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
}

This is equivalent to specifying grid-template-columns: 100px 100px 100px;.

The minmax() function allows you to set a range for column or row sizes, specifying a minimum and maximum value.

.container {
    display: grid;
    grid-template-columns: 100px minmax(100px, 500px) 100px;
}

In this case, the middle column will be at least 100px wide but can expand up to 500px, depending on the available space.

To create space between grid items, the column-gap and row-gap properties (or the shorthand gap) can be used.

.container {
    display: grid;
    column-gap: 10px;
    row-gap: 20px;
}

This sets a 10px gap between columns and a 20px gap between rows.

Grid items can be positioned within the grid using the grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties.

.item {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 4;
}

This positions the item starting from the first row line to the third, and from the second column line to the fourth. A shorthand notation combines these properties.

.item {
    grid-row: 1 / 3;
    grid-column: 2 / 4;
}

Additionally, the span keyword allows an item to span multiple rows or columns.

.item {
    grid-column: span 2;
}

This makes the item span across two columns.

Grid template areas provide a visual way to define the layout by assigning names to different sections of the grid. For example in a 3x3 grid.

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "left main right"
        "footer footer footer";
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
}

In this setup, the grid is divided into areas named header, left, main, right, and footer. Items can then be placed in these areas using the grid-area property.

.header {
    grid-area: header;
}
.left {
    grid-area: left;
}
.main {
    grid-area: main;
}
.right {
    grid-area: right;
}
.footer {
    grid-area: footer;
}