web front-end entry to combat: CSS + CSS Grid custom properties to achieve super-grid layout capability

I recently noticed a thing CSS custom attributes. CSS custom properties works a bit like SASS and other preprocessor variable, the main difference is that the other methods are generated after compilation in the browser, or the wording of the original CSS. Custom CSS property is a real dynamic variables, you can use style sheets or javascript instant update, which makes them have more possibilities. If you are familiar with JavaScript, I like to think of the difference between the preprocessor variables and custom CSS properties and imagine the difference between const and let similar - they all have different purposes.

CSS custom properties can easily achieve a lot of functions (for example, the theme changes). Lately I've been trying to use CSS from a combination of custom attributes and CSS grid magical effect of what can be achieved, I need to re-define the grid-template-rows and grid-template-columns attributes in different breakpoints. The following code is an example, I use SASS variables define the value of the column widths of different pages in different widths, these values ​​are passed to the grid-template-rows attribute. I for grid-gap property did the same operation, so the page width is not the same spacing between elements is different:

$wrapper: 1200px;
$col: 1fr;
$gutter: 20px;

$wrapper-l: 90%;
$col-l: calc((1000px - (13 * 40px)) / 12);
$gutter-l: 40px;

$col-xl: calc((1200px - (13 * 50px)) / 12);
$gutter-xl: 50px;

body {
    background-color: lighten(grey, 30%);
}

.wrapper {
    max-width: $wrapper;
    margin: 20px auto;

    @media (min-width: 1300px) {
        max-width: $wrapper-l;
    }
}

.grid {
    display: grid;
    padding: $gutter;
    grid-template-columns: 1fr repeat(12, $col) 1fr;
    grid-template-rows: repeat(2, minmax(150px, auto));
    grid-gap: $gutter;
    border: 1px solid grey;
    background: white;
    width: auto;

    @media (min-width: 1300px) {
        grid-template-columns: 1fr repeat(12, $col-l) 1fr;
        grid-gap: $gutter-l;
        padding: $col-l;
    }

    @media (min-width: 1500px) {
        grid-template-columns: 1fr repeat(12, $col-xl) 1fr;
        grid-gap: $gutter-xl;
        padding: $col-xl;
    }
}

.grid__item {
    border: 1px solid blue;
}

.grid__item--heading {
    grid-column: 2 / 11;
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

As you can see, basically in the media must write the query again throughout the block of code to change the style, because once defined variables fixed. (I can certainly use mixin, but the final effect is the same - a chunk of code)

Use CSS custom attributes, you can reduce the amount of code, because I only update media query variables, the browser will recalculate the grid. Ten lines (sass) code may not seem like a huge savings, but the readability of the code is much higher, because you do not add media queries in several places to deal with our new variable, I just code in that component they begin with the statement, and do not need to worry about whether the value of which has been replaced in use:

:root {
    --wrapper: 1200px;
    --col: 1fr;
    --gutter: 20px;

    @media (min-width: 1300px) {
        --wrapper: 90%;
        --col: calc((1000px - (13 * 40px)) / 12);
        --gutter: 40px;
    }

    @media (min-width: 1500px) {
        --wrapper: 90%;
        --col: calc((1200px - (13 * 50px)) / 12);
        --gutter: 50px;
    }
}

body {
    background-color: lighten(grey, 30%);
}

.wrapper {
    max-width: var(--wrapper);
    margin: 20px auto;
}

.grid {
    display: grid;
    padding: var(--gutter);
    grid-template-columns: 1fr repeat(12, var(--col)) 1fr;
    grid-template-rows: repeat(2, minmax(150px, auto));
    grid-gap: var(--gutter);
    border: 1px solid grey;
    background: white;
    width: auto;
}

.grid__item {
    border: 1px solid blue;
}

.grid__item--heading {
    grid-column: 2 / 11;
}

.grid__item--body {
    grid-column: 2 / 8;
    grid-row: 2 / span 1;
}

.grid__item--media {
    background: hotPink;
    grid-column: 11 / 14;
    grid-row: 1 / span 2;
}

Small partners interested in the web front end this technology can be added to our study circle, the sixth year of work, learning to share some with you to develop practical details that need attention. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip

I found a feature to use CSS Grid is that the syntax is very lengthy and not easy to quickly and easily see what is happening, especially in a complex grid. But in this case, a CSS custom properties, and the size may be variable grid coordinate setting item, and write-once, and grid-column grid-row property. To me, this should know better than to write each time the property is much more complete, and it is easy to see at a glance the position of the grid item.