Css grid formatting in intellij idea

display: grid;
grid-template-areas:
    'header login'
    'sidebar content'
    'footer footer';
grid-template-rows: min-content 1fr min-content;
grid-template-columns: 1fr 1fr;
    
    
    

display: grid;
grid-template-areas: 'header login' 'sidebar content' 'footer footer';
grid-template-rows: min-content 1fr min-content;
grid-template-columns: 1fr 1fr;
    
    

@formatter:off

@formatter:on

display: grid;
/*@formatter:off*/
grid-template-areas:
    'header login'
    'sidebar content'
    'footer footer';
/*@formatter:on*/
grid-template-rows: min-content 1fr min-content;
grid-template-columns: 1fr 1fr;
    
    
    

Transcript

hi

so i want to show you how to how to

deal with the formatting of this grid

template areas in

css grid and intellij so basically

um if you think about the css grid this

grid template area is a bit like ascii

art

right so basically this is not just a

description

of what thing goes where like the header

goes on top the content in the middle

and

footer at the bottom but it's in a way

like a

like a graphical representation of it

right so

if we could put like basically we can

see here this like an ascii art of the

header

content we can have here like login and

then it's clear that the login goes on

top of the content

but to the right of the header so it's

really a graphical representation

right i think this is what makes it so

intuitive and because of this

uh there's a problem that happens

sometimes here we have

an example file it could be any css file

but basically in intellij when you out

of format

this is what happens right so intellij

just puts everything in one line

and now here is still maybe possible but

imagine this starts being more

complicated with like sidebar content

maybe some

maybe there could be like 20 lines here

no and then very soon it starts being

confusing

so there's a way to stop this from

happening

and um to do that

there's an intellij trick to disable the

formatter

so what we can do is disable the

formatter using a special command

and then after the part we want to

disable formatting for

we enable it again so it will look like

this

and the the syntax itself

is formatter with this add sign

off and formatter on

now when when we have the format

let's say i create one extra line here

out of format

you see i got several spaces here

see the other format has corrected that

but it didn't touch

this area because it's between this

formatter off

and for material so if i format

right you did the right thing so this is

a small trick but it's quite useful

especially if you just copy this part

around

between all the your css grid

decorations it makes it much easier

because once you start having here like

a lot more uh areas

like for instance you could have here a

sidebar

here maybe like a follow me

i don't know this is just three columns

and three rows but it could be

much more complicated so yeah it really

helps

like it's one thing less you need to

think about so i hope this was useful

and that you can use it