[CSS] grid-template-columns 속성

grid-template-columns

CSS grid-template-columns 속성은 line 이름을 정의하고 grid columns의 사이즈를 정한다. 464 783 207 149

Try it

grid-template-columns: 60px 60px;

60px 60px

 

grid-template-columns: 1fr 60px;

1fr 60px

 

grid-template-columns: 1fr 2fr;

1fr 2fr

 

grid-template-columns: 8ch auto;

8ch auto

 

Syntax

/* Keyword value */
grid-template-columns: none;
 
/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeate(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;
 
/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
    minmax(100px, max-content)
    repeat(auto-fill, 200px) 20%;
grid-template-columns:
    [linename1] 100px [linename2]
    repeat(auto-fit, [linename3 linename4] 300px)
    100px;
grid-template-columns:
    [linename1 linename2] 100px
    repeat(auto-fit, [linename1] 300px) [linename3];
 
/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;