- grid
- flex와 마찬가지로
.container {
display: grid;
} 그리드를 포함하는 컨테이너를 display: grid 로 시작한다.
-
그리드 셀의 크기 지정
grid-template-rows
grid-template-columns -
repeat(반복횟수, 반복값) 함수는 반복값을 자동처리한다.
grid-template-columns: repeat(4, 65px) 이라면
그리드가 4열로 구성되어 있으며 그리드 한 셀당 폭이 65px임을 의미한다.
65px 65px 65px 65px -
첫 행의 최소 크기 90, 최대는 입력값 길이에 따라 자동 / 나머지 다섯 행은 크기 65로 고정 */
grid-template-rows: minmax(90px, auto) repeat(5, 65px); -
유닛 fr(fraction)은 전체 화면에 대해 숫자 비율로 그리드 크기를 나누는 것을 의미한다.
-
grid-column: span 4;
그리드 요소가 차지하는 column의 수를 의미한다.
첫번째 열부터 마지막 열까지 차지한다면 grid-column: 1 / -1;
- word-wrap, word-break
-
word-wrap
긴 텍스트를 끊어서 줄바꿈 해주는 속성
텍스트가 길어 요소(높이와 너비가 있는 인라인요소, 블록요소) 밖으로 넘어갈 경우 줄바꿈을 하기 위해 사용한다.
속성값으로는
- normal : break point에서 줄바꿈
- break-word : 요소의 경계에서 break point가 아니어도 강제로 줄바꿈 -
word-break
텍스트 분리를 어떻게 할 것인지 결정
속성값으로는
- keep-all : 단어가 break-point
- break-all : 글자가 break-point
-
보통 word-wrap과 word-break 를 동시에 사용한다.
