grid 정리
CSS에서 grid 사용하기
https://cssgridgarden.com/#ko
display: grid; 으로 시작 한다.
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
으로 5칸으로 같은 퍼센트로 나눈다.
grid-column-start는 컬럼의 시작 지점을 의미한다
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 3;
}grid-column-end 은 컬럼의 끝지점을 의미한다
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 1;
grid-column-end: 4;
}span을 이용하여 열(column)의 넓이를 지정할 수 있습니다. span은 양수만 설정 가능합니다.
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 2;
grid-column-end: span 2;
}span keyword와 grid-column-start를 이용하여 마지막 위치에서 상대적으로 항목의 넓이를 설정이 가능합니다.
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: span 3;
grid-column-end: 6;
}grid-column은 매번 grid-column-start와 grid-column-end를 입력하는 것은 불편합니다. 다행스럽게, grid-column는 한번에 입력가능한 단축해서 설정으로, /(슬래쉬)로 구분됩니다
grid-column: 2 / 4; 이와 같이 사용할수 있다
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column: 4 / 6;
}- grid-column를 이용하여 당근에 물을 주십시오. span keyword도 그대로 사용이 가능합니다.
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column: span 3/5;
}grid-row-start은 로우의 시작을 의미한다
- grid-row-start는 grid-column-start 수직선을 제외하곤 동일하게 작동합니다
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-row-start: 3;
}grid-row 는 grid-column과 같은 의미로 사용할수있다.
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-row: 3/6;
}grid-area
- grid-column와 grid-row 모두를 입력하는게 너무 많은경우, 다른 속성을 이용하여 줄일 수 있습니다. grid-area은 /(슬래쉬)로 구분지어 grid-row-start, grid-column-start, grid-row-end, grid-column-end순으로 입력 가능합니다.
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-area: 1/2/4/6;
}order는 기본적으로, 그리드의 모든 요소들은 order의 값이 0이지만, z-index와 같이 양수와 음수의 값 모두 설정이 가능합니다.
- order는 소스코드에 기입된 순서대로 표기한다.
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
order: 0;
}
#poison {
order: 5;
}지금까지의 정원은 열(column)과 행(row)이 각각 20% 너비의 5개 요소로 설정되어있습니다.
이 설정은 grid-template-columns: 20% 20% 20% 20% 20%;과 grid-template-rows: 20% 20% 20% 20% 20%;로 각 속성에는 5개의 열을 만드는 5개 값이 있으며, 각 열은 정원의 20% 너비 설정되었습니다.
하지만 지금부터는 그리드의 설정을 원하는대로 설정할 수 있습니다. grid-template-columns를 새로운 값을 설정하여 당근에 물을 주세요. 첫번째 열(column)의 넓이를 50%로 설정하세요.
grid-template-columns는 원하는 넓이로 설정이 가능하다.
예제문제
#garden {
display: grid;
grid-template-columns: 50%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column: 1;
grid-row: 1;
}- repeat은 동일한 너비의 열(column)들을 지정할려면 불편할 수 있습니다. 다행스럽게도 a repeat 함수가 이 문제를 해결해줍니다.
예제문제
#garden {
display: grid;
grid-template-columns: repeat(1,12.5%);
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column: 1;
grid-row: 1;
}grid-template-columns은 백분율 같은 값뿐만 아니라, 픽셀 및 em과 같은 길이 단위도 허용합니다. 또한 서로 다른 단위를 함께 사용할 수도 있습니다. px, em, % 가 있다.
예제문제
#garden {
display: grid;
grid-template-columns: 100px 3em 40%;
grid-template-rows: 20% 20% 20% 20% 20%;
}Grid는 새로운 단위인 fractional fr를 소개하고 있습니다. 각 fr 단위들은 사용가능한 공간을 하나로 공유하여 할당합니다. 예시로, 두개의 element들을 1fr과 3fr로 설정시, 공간이 4개의 동일한 크기로 공유됩니다. 첫번째 element는 사용가능한 공간의 1/4 크기로 그리고 두번째 element는 3/4 크기를 차지합니다.
예제문제
#garden {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: 20% 20% 20% 20% 20%;
}예제문제
이제 당신의 정원 왼쪽 75px에 잡초가 있습니다. 나머지 공간의 3/5에는 당근이 자라고 있으며, 반대인 2/5에는 잡초가 넘치고있습니다.
grid-template-columns를 px와 fr단위와 함께 사용하여 필요한 열(column)을 만드세요.
#garden {
display: grid;
grid-template-columns: 75px 3fr 2fr;
grid-template-rows: 100%;
}grid-template-rows
grid-template-rows은 grid-template-columns와 거의 동일하게 작동합니다
예제문제
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 47px 1px 1px 1px 1fr;
}
#water {
grid-column: 1 / 6;
grid-row: 5 / 6;
}grid-template
grid-template은 grid-template-rows와 grid-template-columns를 조합한 단축 속성입니다.
예제문제
#garden {
display: grid;
grid-template: 60% 60%/ 200px;
}
#water {
grid-column: 1;
grid-row: 1;
}예제문제
당신의 정원은 멋지다. 여기 정원 바닥 50px을 남겨두고 나머지 모두를 당근으로 채웠습니다.
불행하게도, 당신의 당근 왼쪽 20%는 잡초로 우거져 있습니다. 정원의 치료를 위해 CSS grid를 사용해보시기 바랍니다
#garden {
display: grid;
grid-template-rows: 1fr 50px; grid-template-columns:20% 5fr
}