CSS GRID

Grid

 

 

Fraction

- 총 합에서 차지하는 비율(ex. 1fr)

- repeat 속성으로 줄여 쓰기

.container {
  display: grid;
/* 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(10,1fr);
	grid-template-rows: repeat(3,100px);  */
	grid-template: repeat (3,100px)/repeat(2,1fr); /* 앞은 열/뒤는 줄 */
	grid-gap: 10px;
}

 

 

Positioning

.container {
    display: grid;
    grid-gap: 3px;
    grid-template-columns:repeat(12,1fr);   
		grid-template-rows: 40px 400px 40px;
}

.header {
	 	grid-column: 1/-1;
/*
	컬럼 라인 1-3까지
	grid-column-start:1;
	grid-column-end: 3;
	grid-column: 1/-1;
	
	컬럼라인 1번부터 2칸
	grid-colunm: 1/span 2;
	grid-colunm: span 2;  */
}

/* 메뉴 4컬럼 콘텐트 8컬럼 */
.menu {
	grid-column: span 4;
}

.content {
grid-column: span 8;
}

.footer {
	grid-column: 1/-1;
}

 

Named Lines

.container {
    height: 100%; 
    display: grid;
    grid-gap: 3px;
		grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end];
		grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end]; 
}
.header {
	/* grid-column: main-start/main-end; 
	이름이 같으면 줄여서 쓰는 거 가능 */		
		grid-column: main;
}
.content {
		grid-column: content;
}
.footer {   
		grid-column: main-start/main-end;
}

 

auto-fit / min max / auto-rows

auto-fit: 자동으로 칸에 맞게끔 채우기

minmax: 최소값 최대값으로 맞추기

auto-rows: 자동으로 줄 채우기

.container {
    display: grid;
    grid-gap: 5px;
    /* auto-fit: 자동으로 칸에 맞게끔 채워짐 */
    /* minmax: 최소값은 100px 커질땐 1fr */
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    /* grid-template-rows: repeat(2, 100px); */
    grid-auto-rows: 100px;
}

 

 

Image Grid

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 75px;
		grid-auto-flow: dense; /* 빈공간 채워주는 속성 */
}

.horizontal {
	grid-column: span 2;
}

.vertical {
	grid-row: span 2;
}

.big {
	grid-column: span 2;
	grid-row: span 2;
}

 

Justify-content / align-content

주축에서 배열하는 법

교차축에서 배열하는 법

.container {
    border: 1px solid black;
    height: 100%;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
    justify-content: space-evenly;
    align-content: space-evenly;
}

 

Justify-items / align-items

.container {
    height: 100%; 
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px auto 40px;
    justify-items: stretch; /* 주축 기본값 */
    align-items: stretch; /* 교차축 기본값 */
}

.header {
    grid-column: 1 / -1;
}

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

.content {
    grid-column: 3 / -1;
    /* content 왼쪽 상단에 배치 */
    justify-self: start;
    align-self: start;
}

.footer {
    grid-column: 1 / -1;
}

 

auto-fit / auto-fill

fit: 채우다

fill: 채우지 않는다