Building value

CSS[Grid] 본문

CSS

CSS[Grid]

developer_Michael 2023. 4. 6. 07:56
반응형

CSS Grid는 웹페이지의 레이아웃을 구성하는 데 사용되는 2차원 그리드 시스템입니다. 

 

Grid는 각각의 요소들이 위치할 수 있는 행과 열을 제공하며, 요소의 크기와 위치를 상대적으로 지정할 수 있습니다.

CSS Grid는 다음과 같은 주요 개념들을 포함합니다.

-그리드 컨테이너(Grid Container): 그리드가 적용될 영역을 지정합니다.
-그리드 아이템(Grid Item): 그리드에 포함될 각 요소들을 지정합니다.
-그리드 행(Grid Row): 그리드의 수평 방향을 나타냅니다.
-그리드 열(Grid Column): 그리드의 수직 방향을 나타냅니다.
-그리드 라인(Grid Line): 그리드를 나누는 가상의 수평선과 수직선을 말합니다.
-그리드 셀(Grid Cell): 그리드의 한 칸을 나타냅니다.

 

다음은 예시 코드블럭입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px;
            grid-gap: 10px;
        }

        .item {
            background-color: #fff;
            border: 1px solid #333;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
    </div>
</body>
</html>

위 코드블럭에서는 display: grid를 사용하여 그리드를 생성하였습니다. 

 

grid-template-columns와 grid-template-rows를 사용하여 그리드 컨테이너의 열과 행을 지정하였습니다. 

 

grid-gap을 사용하여 그리드 아이템들 사이의 간격을 지정하였습니다.

각각의 그리드 아이템은 .item 클래스를 가지고 있으며, 배경 색상, 테두리, 패딩, 폰트 크기, 정렬 등의 스타일을 지정하였습니다. 

 

이렇게 스타일을 지정한 그리드 아이템들은 자동으로 그리드의 행과 열에 배치됩니다.

CSS Grid는 레이아웃을 유연하고 효율적으로 설계할 수 있는 기능을 제공하므로, 

 

웹페이지 디자인에서 매우 유용하게 사용됩니다.

반응형

'CSS' 카테고리의 다른 글

CSS[Flexbox]  (0) 2023.04.06
CSS[Media Query]  (0) 2023.04.05
CSS[Display 속성]  (0) 2023.04.04
CSS[Position 속성]  (0) 2023.04.03
CSS[Float&Clear]  (0) 2023.04.03
'CSS' Related Articles more