grid layout 그리드 레이아웃
그리드 레이아웃이란 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식을 말합니다.
그리드 레이아웃 방식에서, 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정됩니다.
그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소
그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소
display: grid;
그리드 영역은 모두 블록 컨테이너 배치가 기본 값이지만 인라인으로도 넣을 수 있습니다.
display: inline-grid;
<style>
.parent{
border: 3px solid red;
display: grid;
}
.children{
background-color: orange;
border: 3px solid teal;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
</div>
</body>
500px짜리의 그리드가 만들어지고 그 안에 columns(열) 의 공간이 200px 200px 차지하도록 만듭니다.
<style>
.parent{
border: 3px solid red;
display: grid;
width: 500px;
grid-template-columns: 200px 200px ;
/*수치를 여러 개 주는 이유는 열을 여러 개 만들기 위해서*/
}
.children{
background-color: orange;
border: 3px solid teal;
}
</style>
두 개의 200px 씩 지정된 열들이 나열됩니다.
즉, px이 두 개 적혀있으므로 각각의 200px 200px 의 열 두개로 콘텐츠들이 자동으로 나누어집니다.
열과 행을 같이 나열할 수도 있습니다.
<style>
.parent{
border: 3px solid red;
display: grid;
width: 500px;
grid-template-columns: 100px 350px ;
/*수치를 여러 개 주는 이유는 열을 여러 개 만들기 위해서*/
grid-template-rows: 100px 200px 300px;
}
.children{
background-color: orange;
border: 3px solid teal;
}
</style>
이 경우 100px과 350px의 열 두 개와
100px 200px 300px 의 행이 생성됩니다.
행과 열의 사이를 균등하게 20px씩 떨어뜨릴 수도 있습니다.
만약 20px만 기재하면 행과 열이 균등하게 20px이라면
20px 40px을 설정할 경우 행은 20px이고, 열은 40px 만큼 공간을 균일하게 가져갑니다.
<style>
.parent{
border: 3px solid red;
display: grid;
width: 500px;
grid-template-columns: 100px 350px ;
/*수치를 여러 개 주는 이유는 열을 여러 개 만들기 위해서*/
grid-template-rows: 100px 200px 300px;
gap : 20px 40px;
}
.children{
background-color: orange;
border: 3px solid teal;
}
</style>
fraction 단위
그리드 아이템의 fr(fraction 분수) 단위가 있습니다.
fraction은 사용 가능한 공간을 분배한다는 뜻입니다.
가령 예시를 보자면
grid-template-columns: 100px 1fr ;
전체 공간에서 100px을 빼고 남아있는 공간을 1로 나누어서 혼자 씁니다.
grid-template-columns: 100px 1fr 2fr;
전체 공간에서 100px를 제외하고 남아있는 공간을 1:2로 분배합니다.
repeat
repaet은 셀을 만들 때 같은 크기를 여러 개 반복을 할 때 사용합니다.
grid-template-columns: repeat(2, 100px);
100px을 두 개 만든다는 설정입니다.
repeat의 인수로 minmax를 만들 수 있는데, 이것은 100까지만 줄어들고, 250까지만 늘어나는 열을 만듭니다.
즉 브라우저의 사이즈를 줄일 때 늘어나고 줄어드는 정도를 조절할 수 있습니다.
grid-template-columns: repeat(2, minmax(100px, 250px));
반복되는 수를 지정하지 않고 자동으로 채울 수 있게 만들 수도 있습니다.
auto-fill을 기재해주면 됩니다.
grid-template-columns: repeat(auto-fill, minmax(100px, 250px))
auto-fill과 auto-fit
auto-fill과 auto-fit은 차이가 있습니다.
auto-fit은 컨테이너 내부에 공간이 남을 경우, 공간을 셀들이 나눠 갖습니다.
반면 auto-fill은 다른 셀들이 들어갈 공간을 만듭니다.
사실상 같은 결과를 만들지만 그리드의 특징이 다르기 때문에 명세상의 차이가 구분 됩니다.
행과 열의 갯수에 따라서 줄의 번호들이 정해집니다.
grid-column & row
grid-column과 grid-row 속성을 이용하면 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치할 수 있습니다.
.children:nth-child(1){
grid-column: 1/3;
}1번 줄부터 3번줄까지 요소가 차지합니다.
이렇게 되면 나머지 공간은 다른 요소들이 나누어 가지게 됩니다.
grid-template-areas
각 아이템에 이름을 지정한 다음, 그 이름이 어떻게 배치가 될 것인지 문자형으로 직접 작성합니다.
비율이 알아서 계산이 되고 그 비율대로 템플릿이 생성됩니다.
<style>
.parent{
border: 3px solid red;
display: grid;
grid-template-areas:
"일 일 이"
"삼 사 오";
}
.children:nth-child(1){grid-area: 일;}
.children:nth-child(2){grid-area: 이;}
.children:nth-child(3){grid-area: 삼;}
.children:nth-child(4){grid-area: 사;}
.children:nth-child(5){grid-area: 오;}
.children{
background-color: orange;
border: 3px solid teal;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
</div>
</body>
비율이 자동으로 계산된 것을 볼 수 있습니다.