그리드 기본 구조 만들기

13423 단어 CSSCSS

부트스트랩, 피그마 등에서 불리우는 그리드 시스템과는 조금 다른 얘기이다.
그리드 시스템에 대한 포스팅은 추후 할 예정이며, 우선적으로는 관련한 깃헙 레포를 첨부한다.
Sass + 그리드 시스템 활용

기본 구조 만들기

다음과 같이 그리드의 기본 구조를 만들어보자.

// index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>Grid</title>
    </head>
    <body>
        <div class="grid">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </body>
</html>
// styles.css
* {
    box-sizing: border-box;
}

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 200px 100px auto;
    grid-gap: 10px;
}

.grid > div {
    border: 1px solid rgb(0, 95, 107);
    border-radius: 5px;
}

Responsive Grid with fr

다만 현재의 상태에서는 그리드 박스가 늘어나거나 줄어들지 않고 고정된 폭을 가진다.
이를 유연한 폭을 가지도록 하게끔 바꿔주는 방법은 굉장히 간단하다.

grid-template-columns: 100px 100px 100px;

위 부분을 다음처럼 바꿔주자.

grid-template-columns: 1fr 1fr 1fr;

width가 유연하게 늘어나고 줄어드는 것이 확인되는가?
그리고 또한 비율을 각각 다르게도 설정이 가능하다.

grid-template-columns: 2fr 3fr 1fr;

위와 같은 형태는 웹 사이트에서 많이 쓰이는 레이아웃이다.
왼쪽에 사이드바를 두고 가운데에 메인의 영역을 두고 오른쪽에 서브 사이드바를 두는 형태이다.

하나는 고정값을 가지고, 두개는 유연하게도 할 수 있다.

grid-template-columns: 2fr 3fr 100px;

이러면 3번은 항상 100px로 고정된다.

repeat

grid-template-columns: 1fr 1fr 1fr;

위 내용은 repeat를 써서 다음과 같이 쓸 수 있다.

grid-template-columns: repeat(3, 1fr);

column이 3개가 동일한 width로 만들어진다.

grid-template-columns: repeat(2, 1fr 2fr);

위와 같은 경우로도 구성할 수 있다.

grid-template-columns: 50px repeat(2, 1fr 2fr);

맨 좌측의 column은 50px로 고정되고 나머지는 repeat를 따른다.

minmax

 grid-template-columns: minmax(50px, 150px) 1fr 2fr;


위와 같이 minmax를 사용하면 박스의 최소길이와 최대길이를 지정할 수 있다.
아무리 내용의 양이 적더라도 최소한 width 50px은 확보하고, 내용이 많아 50px이 넘어가면 알아서 늘어어나다가 150px까지만 늘어나도록 처리해 준 예시이다.
다른 예로 minmax(50px, auto)의 의미는 최소한 50px, 최대는 자동으로(auto) 늘어나게이다.

grid-template-columns: minmax(50px, 150px) 1fr 2fr;
grid-auto-rows: minmax(100px, auto);

row에도 똑같이 minmax를 사용하여 높이가 최소 100px을 차지하게, 내용의 양이 많다면 알아서 늘어나게 해줄 수 있다.

[백준] - 단계별로 풀어보기(반복문) 10952
데이터셋 불러오기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage