CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.
Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며,
좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다.
아래와 같은 계산기를 CSS Grid를 활용해서 디자인을 해보겠습니다.
html 소스코드는 아래와 같습니다.
<body>
<div class = "calculator">
<form name="form">
<input id ="resultBox" type= "text">
<input id= "AC" type= "button" value="AC">
<input type= "button" value="/">
<input type= "button" value="1">
<input type= "button" value="2">
<input type= "button" value="3">
<input type= "button" value="*">
<input type= "button" value="4">
<input type= "button" value="5">
<input type= "button" value="6">
<input type= "button" value="+">
<input type= "button" value="7">
<input type= "button" value="8">
<input type= "button" value="9">
<input type= "button" value="-">
<input type= "button" value=".">
<input type= "button" value="0">
<input id= "equal" type= "button" value="=">
</form>
</div>
</body>
아래와 같이 출력됩니다.
display: grid를 선언해보겠습니다.
body form {
display: grid;
}
컨테이너 요소( <form name="form">)를 지정해서
grid를 선언한다면 자식 요소들은 아이템(item)이 됩니다.
grid를 통해 아이템들은 block이 되면서 위와 같이 출력됩니다.
이제 gird-template를 통해 row(가로)와 column(세로)를 정해보겠습니다.
6개의 row(가로)줄과 4개의 column(세로) 입니다.
6개의 row(가로)줄과 4개의 column(세로)을
grid-template-columns와 grid-template-row 속성을 통해 정할 수 있습니다.
주의해야할 사항으로는, 줄의 수를 넣는게 아니라 줄의 개수만큼의 사이즈를 기술해야합니다.
body form {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px 50px 50px;
}
각각의 colum과 row가 50px 만큼의 크기를 가졌습니다.
repeat() 함수를 사용한다면?
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px 50px 50px;
위와 같이 기술된 내용은 아래와 같이 repeat() 함수를 통해 대체 가능합니다.
grid-template-columns: repeat(4, 50px);
grid-template-rows: repeat(6, 50px);
fr 단위를 사용한다면?
비율로 지정하고 싶을때, 유연한 단위를 지정하고 싶을 때는 fr 단위를 사용해도 됩니다.
fr은 fraction(분수)라는 이름에 맞춰서 공간의 일정 비율을 나타냅니다.
body form {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
전체가 4가 되며,
순서대로 1/2(2/4) - 1/4 - 1/4
body form {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
}
전체가 6이 되며,
순서대로 1/6 - 1/2(2/4) - 1/6
row와 row 또는 column과 column 사이의 gap(갭) 을 지정할 수 있습니다.
body form {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px 50px 50px;
column-gap: 5px;
row-gap: 5px;
}
이제 excel에서의 병합과 같은 속성을 정해보겠습니다.
위의 내용을 자세히 살펴보겠습니다.
grid 에서는 grid line(그리드 라인)이 존재합니다.
사진을 보면 라인이 총 5개가 있으며,
item(resultBox)이 1번 column부터 시작해서 5번 column까지 설정해줄 수 있을겁니다.
#resultBox {
grid-column-start: 1;
grid-column-end: 5;
}
row도 동일합니다.(참고로 이번 계산기 예제는 row를 병합할 일이 없습니다.)
#resultBox {
grid-row-start: 1;
grid-row-end: 4;
}
그렇다면, 위에서 배웠던 내용을 가지고 나머지 item들도 적용해보겠습니다.
body form {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px 50px 50px;
column-gap: 5px;
row-gap: 5px;
}
#resultBox {
grid-column-start: 1;
grid-column-end: 5;
}
#AC {
grid-column-start: 1;
grid-column-end: 4;
}
#equal {
grid-column-start: 3;
grid-column-end: 5;
}
댓글