07.18~ css grid system[TIL]

Devback·2020년 7월 18일
0

css grid는 2차원 레이아웃 시스템이다.

CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이라고 한다.

그리드 시작하는 방법

.grid {
display:grid
}

grid-template-columns를 이용한 행 만들기

.grid
{ display: grid; 
  width: 500px;
  grid-template-columns: 100px 200px;
}

grid-template-columns는 px뿐 아니라 %로도 정의를 할 수 있다.

.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}

물론 px과 % 둘다 섞어서도 사용이 가능하다.

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px;
}

Fraction
css grid는 fr이라는 새로운 단위를 사용한다.

.grid { 
display: grid; 
width: 1000px;
 height: 400px; 
grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

height값이 400px이다. 슬래쉬 전에 있는 fr 값의 합은 4fr이다.
그렇다면 첫 번째 열의 값은 2/4 fr이므로 200px이다.
두 번째 세 번째 열의 값은 1/4 fr이므로 각각 100px이다.

행의 값도 같은 방식으로 한다.

....
너무 졸려서 오늘은 여기 까지만 써야겠다...

profile
나랑 같이 개발할 사람🖐

0개의 댓글