CSS Grid

What are CSS Selectors?

CSS Selectors are patterns used to select the elements you want to style in your web page. They are one of the core features of CSS and allow precise targeting of HTML elements.

Types of Selectors

Here are the most commonly used CSS selectors:

1. `display: grid`

Defines an element as a grid container, establishing a new grid formatting context for its contents.

.container {
    display: grid;
}
    

2. `grid-template-columns`

Defines the columns of the grid with specific sizes or auto-layout behavior.

.container {
    grid-template-columns: 100px 200px auto;
}
    

3. `grid-template-rows`

Defines the rows of the grid with specific sizes or auto-layout behavior.

.container {
    grid-template-rows: 50px 100px auto;
}
    

4. `gap`

Defines the space between rows and columns in the grid.

.container {
    gap: 20px;
}
    

5. `grid-column`

Specifies the starting and ending column for a grid item.

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

6. `grid-row`

Specifies the starting and ending row for a grid item.

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

7. `align-items`

Aligns items along the block (vertical) axis.

.container {
    align-items: center;
}
    

8. `justify-items`

Aligns items along the inline (horizontal) axis.

.container {
    justify-items: center;
}
    

9. `grid-auto-flow`

Controls the flow of items when they are auto-placed in the grid.

.container {
    grid-auto-flow: column;
}
    

10. `align-content`

Aligns the entire grid along the block (vertical) axis when there’s extra space.

.container {
    align-content: center;
}
    

11. `justify-content`

Aligns the entire grid along the inline (horizontal) axis when there’s extra space.

.container {
    justify-content: space-between;
}
    

12. `grid-template-areas`

Defines named areas in the grid for better readability and layout control.

.container {
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}
.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}
    

13. `minmax()`

Sets a range for a grid track, defining the minimum and maximum sizes.

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

14. `repeat()`

Reduces repetition in grid definitions by repeating values.

.container {
    grid-template-columns: repeat(4, 1fr);
}
    

15. `auto-fit`

Automatically fits grid items based on the container’s size and available space.

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

16. `auto-fill`

Fills the grid container with as many items as possible, leaving gaps if necessary.

.container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
    

17. `grid-auto-columns`

Specifies the size of implicitly created columns.

.container {
    grid-auto-columns: 100px;
}
    

18. `grid-auto-rows`

Specifies the size of implicitly created rows.

.container {
    grid-auto-rows: 50px;
}
    

19. Nested Grids

Creates grids within grid items for more complex layouts.

.grid {
    display: grid;
    grid-template-columns: auto auto;
}
.nested {
    display: grid;
    grid-template-columns: auto auto;
}
    

20. `place-items`

Shorthand for `align-items` and `justify-items`.

.container {
    place-items: center;
}