CSS grid
플렉스 박스와 똑같이 그리드도 CSS의 기본 기능이다. 플렉스 박스는 1차원 레이아웃에서, 그리드는 2차원 레이아웃에서 쓰인다.
- 그리드 사용하기
그리드 또한 플렉스 박스처럼 먼저 컨테이너를 생성한다. 컨테이너는 내부에 있는 각각의 항목의 부모 요소가 된다.
display: grid;를 속성으로 추가하면
그리드 컨테이너가 생성되었다. 그리드 컨테이너는 안에 있는 요소들의 모든 레이아웃을 통제할 수 있는데, 사전 정의된 레이아웃을 생성하려면 grid-template-columns속성을 사용한다. 속성값으로는 만들고 싶은 각 열의 너비값을 넣어줘야 한다.
ul {
background-color: rgb(250, 146, 63);
list-style: none;
width: 800px;
margin: 10px auto;
padding: 10px;
display: grid;
grid-template-columns: 400px 400px;
}현재 ul요소의 width가 800px이므로 두 개의 열을 만들고 싶다면
grid-template-columns: 400px 400px;과 같이 설정한다. 그러면
열이 두 개가 되었다.
grid-template-columns: 400px 200px;만약 ul의 너비인 800보다 작게 속성값을 주게 되면 그 값만큼 컨테이너의 공간이 남게 된다. 그러므로 그리드에서는 px단위를 사용하지 않고 fr(fractions)이라는 단위를 사용하는게 좋다.
fr은 특정 열에 적용해줄 그리드 내의 사용가능한 공간을 지정한다.
grid-template-columns: 1fr 200px;200px만큼의 요소가 차지하고 남은 600px의 공간을 card1, 3, 5, 7에 여백이 추가되어 차지하고 있다.
grid-template-columns: 2fr 1fr;이 경우는 ul의 전체 너비가 3fr이 되고, 왼쪽 열이 2fr만큼, 나머지 열이 1fr만큼의 공간을 차지하는 것이다.
gap 속성
grid-template-columns속성 외에도 gap 속성을 사용하면 요소들 사이의 틈(간격)을 지정해줄 수 있다. 이는 맨 앞 행과 맨 앞 열의 틈을 지정한다.
gap: 100px 200px;첫 번째 속성값은 행들 사이의 틈을, 두 번째는 열들 사이의 틈을 정한다.
각 card들의 여백에 더해서, 실제로 틈이 생겨난 것을 볼 수 있다.
nth-type 선택자
하지만 card3만 전체 행만큼의 너비를 가지게 하려면 어떻게 해야할까? 이때는 nth-type선택자를 사용한다.
li:nth-of-type(3){
}괄호안에는 지정하고 싶은 요소의 순서번호를 넣어주면 된다.
이제 card3이 전체 행을 차지하게 하려면 먼저 그리드 컨테이너의 구조를 생각해야 한다. 컨테이너는 현재 두 개의 열을 가진다. 그러므로 이 요소가 두 개 만큼의 열을 차지하라고 알려주어야 한다.
이때는 grid-column 속성을 사용한다. 속성값으로는 시작 열 번호 / 끝 열 번호를 준다.
li:nth-of-type(3){
background-color: yellow;
grid-column: 1 / 2;
}그런데 아무런 변화가 없다. 개발자 도구를 켜서 보면
맨 위의 열 번호를 보면 첫 번째 열은 1번에서 시작~2번에서 끝이고, 두 번째 열은 2번 시작~3번 끝이다. 그러므로
li:nth-of-type(3){
background-color: yellow;
grid-column: 1 / 3;
}이라면
또 다른 방법:
li:nth-of-type(3){
background-color: yellow;
grid-column: 1 / span 2;
}span은 이 요소가 몇 개의 열을 차지해야 하는지를 알려준다고 한다. 이게 단위는 아닌 것 같고 검색을 해봐도 span태그밖에 나오지 않는데 정확히 뭔지를 모르겠다..
+그리드의 행, 행과 열을 다룰 수도 있다고 하니까 이는 나중에 알아봐야겠다.
추가 사항
이렇게 요소들이 그리드의 전체 공간을 사용하지 않는 이유는 사전 정의된 너비때문이므로 너비를 없애주면 된다.
원하던 모양이 나왔다.
