2023. 7. 15. 19:56ㆍ기술 창고/CSS
Grid 로 레이아웃을 구성했다면 이제 해당 Grid의 Size를 지정해주는 CSS 옵션들에 대해 알아보고 적용해보겠습니다.
Size를 지정해줄 때 px을 사용하여 고정적인 크기를 가지게 할 수도 있으며, rem 과 같은 크기 키워드를 적용해 줄 수 있습니다.
grid-template
index.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="./style.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
style.css
.grid-container{
display: grid;
grid-template: 100px 200px / 400px 800px;
}
.grid-container > *{
border: 1px black solid;
}앞서 grid는 행과 열에 대한 크기와 수를 지정해줄 때 grid-template-rows, grid-template-columns 옵션을 사용해주었는데
이것을 합쳐 grid-template 옵션으로 한번에 행과 열에 대한 내용 설정을 진행해 줄 수 있습니다.
결과
auto size 속성
index.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="./style.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
style.css
.grid-container{
display: grid;
grid-template-rows: 100px auto;
grid-template-columns: 200px auto;
}
.grid-container > *{
border: 1px black solid;
}grid-template-rows나 grid-template-columns 옵션에 auto 속성을 넣으면 자동적으로 크기나 너비가 부여됩니다.
columns에 auto를 부여하면 창의 끝까지 너비가 자동적으로 부여됩니다.
rows에 auto를 부여하면 columns와 다르게 컨텐츠의 내용에 맞춰서 크기가 자동적으로 부여됩니다.
결과
fractional size 속성
index.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="./style.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
style.css
.grid-container{
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}
.grid-container > *{
border: 1px black solid;
}
grid-template 옵션에 fr 키워드로 크기를 지정하면 분할로 크기가 지정됩니다.
좀 더 쉽게 말하자면, rows의 1fr, 2fr은 첫 번째 행의 크기는 두 번째 행의 절반입니다.
행은 auto 속성에서도 알 수 있듯이 특정 크기를 지정해주지 않으면 컨텐츠의 내용에 따른 크기를 지정받습니다.
columns에 지정한 1fr, 2fr 도 첫 번쨰 열의 크기는 두 번째 열의 절반입니다.
열은 auto 속성에서도 말했듯이 너비를 지정해주지 않으면 창의 끝까지 너비를 가져가는 것이 특징입니다.
지금 너비를 딱히 지정해주지 않았으니 전체 창의 너비에서 첫 번째 열이 3분의 1의 너비, 두 번쨰 열은 3분의 2의 너비를 가지게 되는 것입니다.
결과
minmax size 속성
index.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="./style.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
style.css
.grid-container{
display: grid;
grid-template-rows: 200px 400px;
grid-template-columns: 200px minmax(400px, 800px);
}
.grid-container > *{
border: 1px black solid;
}minmax 속성을 적용하면 창을 줄일 때 최소 어디 크기까지 줄어들지 창을 넓힐 떄 최대 어디 크기까지 넓히는지 지정해줄 수 있습니다.
위의 코드에서 보면 columns 에 minmax 를 적용했습니다.
두 번째 열에 minmax(400px, 800px) 를 지정해주었는데, 처음 크기에서 창을 넓히면 800px 까지 넓어지고 줄이면 400px까지 줄어들고 그 이상 줄이면 창을 벗어납니다.
결과
repeat size 속성
index.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="./style.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
style.css
.grid-container{
display: grid;
grid-template-rows: repeat(2, 200px);
grid-template-columns: repeat(2, 100px);
}
.grid-container > *{
border: 1px black solid;
}repeat 속성을 사용하면 반복되는 동일한 열이나 행의 개수와 크기를 고정적으로 지정해줄 수 있습니다.
위의 코드를 보면 rows 에 repeat(2, 200px) 을 지정했습니다.
이는 2개의 행을 크기 200px로 지정하여 설정한다는 뜻입니다.
columns에도 repeat(2, 100px) 를 지정해주었는데, 2개의 열을 너비 100px로 지정하여 설정한다는 뜻입니다.
결과
만약 생성된 아이템들보다 많은 수의 repeat 속성을 적용하면 어떻게 될까요?
.grid-container{
display: grid;
grid-template-rows: repeat(2, 200px);
grid-template-columns: repeat(3, 100px);
}
예를 들어 지금 4개의 아이템들이 각각 rows 2, columns 2 이렇게 옵션이 적용되고 있는데,
columns에 3으로 지정하면 총 5개의 아이템들에 한해서 옵션을 적용하겠다는 뜻입니다
이럴 경우, 먼저 열이 3이므로 4개의 아이템들 중 3개가 3개의 열로 정렬되고 나머지 1개의 아이템만이 다음 행에 존재하게됩니다.
결과
+ 예외 상황
예외의 상황을 하나 가정해보겠습니다.
생성된 아이템들은 5개인데 grid CSS 옵션을 적용시키는 것은 각 열 2개, 행 2개 총 4개의 아이템들에 한새서만 적용한다고 했을 때,
나머지 한 개 는 어떻게 될까요?
위의 이미지처럼 나머지 한 개 만이 CSS가 적용되지 않는 형태로 출력되게 됩니다.
2행 2열의 구조이므로 1행에 나오게 되고, 열 옵션이 없으니 CSS 가 적용된 다른 열의 너비를 따라가게 됩니다.
행 옵션도 없으니 가지고 있는 컨텐츠의 크기만큼만의 크기를 가지게 됩니다.
이 때 grid-auto-rows 옵션을 추가하면 나머지 아이템에 대한 CSS 설정 후속 처리를 진행할 수 있습니다.
이렇게 해서 grid 레이아웃에서 크기를 설정하는 몇 가지 CSS 옵션들에 대해서 알아보았습니다.
'기술 창고 > CSS' 카테고리의 다른 글
| [CSS] Bootstrap (부트스트랩) (0) | 2023.07.18 |
|---|---|
| [CSS] Grid Placement (Grid 배치) (0) | 2023.07.18 |
| [CSS] Grid (레이아웃) (0) | 2023.07.15 |
| [CSS] Flex Sizing (flex 크기 변경) (0) | 2023.07.13 |
| [CSS] Flex Layout - 방향 설정 (0) | 2023.07.12 |