그리드 [grid]

css Layout

대표적으로 flex와 grid가 있음

flex

가로축(row), 세로축(column) 주로 1차원적으로 정렬을 할 때 사용한다

grid

가로축, 세로축을 2차원적으로 정렬을 할 때 사용한다

flex가 보편적으로 쓰이지만 웹사이트 전체를 그리드로 잡는경우 더 유용하게 쓰임

적절하게 상황에 따라 조합해서 쓰면 좋음

 

display : grid

grid를 사용하겠다!는 뜻

 

grid의 속성

display : grid
grid-template-columns
grid-template-rows
grid-template-area
grid-gap
(grid-column-gap
 grid-row-gap)

 

display : grid;
padding : 10x;
grid-template-columns: repeat(4, 100px) ;
grid-template-rows : 100px 200px ;
grid-gap :10px;

gird를 사용해서

colums의 너비를 지정해주기 repeat은 (100px 100px 100px 100px) 를 반복해준다

row로 높이를 지정해주기

grid-gap을 사용해서 각 셀들 사이사이 간격을 동일하게 줄수 있다!

 

display : grid;
padding : 10x;
grid-template-columns: repeat(4, 100px) ;
grid-template-rows : minmax(150px, auto);
grid-gap :10px;

minmax를 사용해서 최소높이는 150을 유지하되, 컨텐츠의 길이에 따라 자동으로 늘어남 ( 그 외 나머지 행의 길이는 150유지)

container {
	display : grid;
	padding : 10x;
	grid-template-columns: repeat(5, 20%); // 20% 20% 20% 20% 20%  
}

colums를 전체

에서 5개의 셀들이 20%씩 차지한다

 

container {
	display : grid;
	padding : 10x;
	grid-template-columns: repeat(3, 1fr); // 1fr 1fr 1fr
}

.image {
	width : 100%;
    height : 100%;
    object-fit : cover;
}

fr은 전체에서 3개의 셀들이 3등분한 너비를 가지게 된다 ( 화면이 늘어나면 같이 늘어남 )

그리드는 반응형 웹을 만들 때도 되게 유용하게 쓰일 것 같다

그리드를 몰랐던 과거가 후회스러울 정도로 되게 편리한것 같고, 속성들을 잘 이용해서 써야겠다!!