Grid Layout Tutorial

Grid Layout Tutorial#

Enable Layout#

.grid {
    display: grid;
}

Features: The direct child elements of grid layout are grid elements by default

Row and Column Control#

Specify Columns#

Fixed Width

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px; /* Set arrangement and size */
}

Flexible Width

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Set arrangement and size */
}

fr is a floating width specific to grid, which will automatically occupy the remaining space

Specify Multiple Rows and Columns

.grid {
    /* Equivalent to entering 12 columns of 50px each */
    grid-template-columns: repeat(12, 50px);
}

Specify Rows#

.grid {
    /* Equivalent to entering 12 rows of 50px each, same principle as columns */
    grid-template-rows: repeat(12, 50px);
}

Default Specification

grid-auto-rows: 100px; // If not specified, the default row height is 100px

grid-auto-rows: auto; // auto is automatically allocated based on the element size

Keywords#

grid-template-rows: repeat(auto-fill, 50px); // Content will automatically fill, and wrap to the next line if the space is less than 50px

Set Minimum and Maximum Values

grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)); // Minimum column is 150px, maximum is 1fr floating

Element Spacing#

Set Element Spacing#

.grid {
    display: grid;
    /* Set arrangement and size */
    grid-template-columns: 1fr 1fr 1fr;
    /* Set column spacing */
    column-gap: 24px;
    /* Set row spacing */
    row-gap: 24px;
    /* Set row and column spacing uniformly */
    gap: 24px;
}

Arrange Elements#

Manually Define Grid#

To set up such a layout, you can use the grid-template-areas property

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

Each element is assigned to the corresponding area

Example

<template>
    <div class="grid">
        <div class="header">
            This is the header
        </div>
        <div class="aside">
            This is the sidebar<br>
            This is the sidebar<br>
            This is the sidebar<br>
            This is the sidebar<br>
        </div>
        <div class="main">
            This is the main content<br>
            This is the main content<br>
            This is the main content<br>
            This is the main content<br>
            This is the main content<br>
            This is the main content<br>
        </div>
        <div class="footer">
            This is the footer
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>

<style scoped lang="less">
.grid {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas:/* Needs to be specified in the parent element */
        "header header header"
        "sidebar content content"
        "footer footer ."; /* . can be used as a placeholder */
}

.header {
    grid-area: header;
}

.aside {
    grid-area: sidebar;
}

.main {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
</style>

In the above example, another way to specify the content is to wrap it with the corresponding tag

Example: <header>This is the header</header>

header {
    grid-area: header;
}

aside {
    grid-area: sidebar;
}

main {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Direct Use of Grid#

grid is a grid layout, and the layout position can be described using lines

header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

The result is as shown in the above image

Shorthand Same effect as the code above

header {
    grid-columnn: 1 / 3;
    grid-row: 1 / 2;
}

Shorthand 2

Requirement: Span is 1

1 / 2 can be shortened to 1
2 / 3 can be shortened to 2
3 / 4 can be shortened to 3