출처: 드림코딩 유튜브
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="basic-style.css">
<title>CSS Grid Example</title>
</head>
<body>
<div class="container">
<div class="item color1">Item1</div>
<div class="item color2">Item2</div>
<div class="item color3">Item3</div>
<div class="item color4">Item4</div>
<div class="item color5">Item5</div>
<div class="item color1">Item6</div>
<div class="item color2">Item7</div>
<div class="item color3">Item8</div>
<div class="item color4">Item9</div>
<div class="item color5">Item10</div>
</div>
</body>
</html>Basic-style.css
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #181818;
font-size: 1.2rem;
font-weight: bold;
}
.color1 {
background-color: #d7bee2;
}
.color2 {
background-color: #a9c7d8;
}
.color3 {
background-color: #c0df9f;
}
.color4 {
background-color: #f2e5a6;
}
.color5 {
background-color: #e89d9d;
}grid.css
이곳에 예제 코드를 쳐보며 개념을 하나하나 알아보자
grid-template-columns: 100px 100px 100px 100px 100px
===
grid-template-columns: repeat(5, 100px)세로축 셀을 5번 100px로 반복 한다는 의미이다.
grid-template-rows: 100px 200px repeat(2, 100px)가로축 셀을 100px 200px 이후 2셀을 100px로 반복한다는 의미이다.
그리드 레이아웃은 반응형이 중요!
grid-template-columns: repeat(5, 20%);세로축 셀을 화면 크기에 상관없이 전체너비의 20%를 5번씩 반복하겠다는 의미이다.
grid-template-colums: 1fr 2fr 1fr;세로축 셀을 화면 크기에 상관없이 전체너비를 4개로 나누어서 1:2:1 비율로 설정하겠다는 의미이다.
크기를 px로 지정하는것 보다 반응형으로 설정하여 고정길이가 아닌 가변길이로 설정해 놓는것이 좋다.
grid-auto-rows: 150px;전체 몇 줄인지 불명확할때 모든 가로축 셀을 150px로 지정하겠다는 의미이다.
HTML
<div class="item color1">Item1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus repellendus quaerat culpa laborum placeat vitae, impedit soluta sequi optio, ea unde amet a officia? Quod voluptate eum natus maxime perferendis.</div>텍스트가 굉장히 길어졌지만 grid-auto-rows를 150px로 지정해 뒀기 때문에 텍스트가 개행되다가 잘리게 된다.
이때 사용 할 수있는 함수는 minmax()이다
grid-auto-rows: minmax(150px, auto);최소너비는 150px을 유지하고 컨텐츠가 늘어나면 컨텐츠에 맞게 자동으로 높이를 늘린다는 의미이다.
grid-column-gap: 10px;
grid-row-gap: 10px;컬럼만 간격을 10px
로우만 간격을 10px 준다는 의미이다.
셀 사이사이 간격이 아닌 그리드 요소 전체적으로 간격을 두기 위해선 padding을 사용한다
padding: 10px;부트캠프 교육과정 당시 flex는 어느정도 이해를 했었는데 grid는 속성도 많고 반응형을 직접적으로(?) 적용하는 방식이여서 이해도가 많이 떨어졌다. 이번에 grid 개념을 확실하게 잡고 가고자 쌩CSS 를 작성해 보았다.
column과 row fr과 repeat() 함수, minmax() 함수도 헷갈렸는데 확실하게 개념을 잡은듯하다
