CSS 모험에 다시 오신 것을 환영합니다! 오늘 우리는 웹 디자인 무기고에서 가장 강력한 도구 중 하나인 CSS 그리드 레이아웃에 대해 알아볼 것입니다. 다재다능하고 정확하며 웹 페이지를 아름답게 구성된 걸작으로 변환할 수 있는 레이아웃 기술의 스위스 군용 칼이라고 생각하십시오. 그리드를 구축하고 견딜 준비가 되셨나요? 갑시다!

CSS 그리드 레이아웃이란 무엇입니까?

테트리스 게임을 하고 있는데 무작위 블록을 쌓는 대신 모든 것이 어디로 갈지 결정할 수 있다고 상상해 보세요. 이것이 기본적으로 CSS Grid가 하는 일입니다! 유연하고 관리하기 쉬운 복잡한 그리드 기반 레이아웃을 만들 수 있습니다. 기본 2열 레이아웃에서 작업하든 본격적인 잡지 스타일 페이지에서 작업하든 CSS Grid가 도와드립니다.

CSS 그리드를 사용하는 이유는 무엇입니까?

Grid 이전에 웹 개발자는 레이아웃을 생성하기 위해 부동 소수점, 테이블, 심지어 중첩된 div와 같은 투박한 방법에 의존해야 했습니다. 마치 정사각형 블록만으로 레고 성을 짓는 것과 같았습니다. 그러나 CSS 그리드를 사용하면 정말 멋진 것을 만드는 데 필요한 모든 요소를 ​​얻을 수 있습니다. 이 앱이 마음에 드는 이유는 다음과 같습니다.

1. 유연성: 단순한 레이아웃부터 복잡한 레이아웃까지 원하는 레이아웃을 만들어 보세요.
2. 정밀도: 최소한의 노력으로 간격, 정렬 및 순서를 제어합니다.
3. 단순성: 유지 관리 및 수정이 쉽고 깔끔하고 읽기 쉬운 코드입니다.

그리드 설정: 기본 사항

기본부터 시작하겠습니다. 그리드를 생성하려면 그리드 컨테이너와 일부 그리드 항목이 필요합니다. 컨테이너는 마법이 일어나는 곳이고 아이템은 그리드에 배치되는 요소입니다.

    
1
    
2
    
3
    
4

이제 CSS에서 해당 컨테이너를 그리드로 바꿔 보겠습니다.

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.grid-item {
    background-color: #007BFF;
    color: white;
    padding: 20px;
    text-align: center;
}

그리드 속성 이해

분석해 보겠습니다.

• 디스플레이: 그리드: 컨테이너를 그리드.
로 바꿉니다.
• Grid-template-columns:peat(2, 1fr): 너비가 같은 두 개의 열이 생성됩니다. 1fr은 사용 가능한 공간의 일부를 차지하는 유연한 단위입니다.
• gap: 10px: 그리드 항목 사이에 10px 간격이 추가됩니다.

그리드에 항목 배치: 당신이 보스입니다

이제 그리드가 생겼으니 항목을 배치하는 방법을 살펴보겠습니다. CSS 그리드를 사용하면 최고의 게임 보드를 계획하는 마스터 전략가처럼 각 항목을 어디로 이동할지 정확하게 지정할 수 있습니다.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    gap: 10px;
}

.grid-item:first-child {
    grid-column: 1 / 3;
}

이 예에서 첫 번째 그리드 항목은 두 개의 열에 걸쳐 있고 나머지 항목은 해당 차선에 깔끔하게 유지됩니다. 그리드 열 및 그리드 행을 사용하여 시작점과 끝점을 정의하여 그리드의 어느 곳에나 항목을 배치할 수 있습니다. 이는 마치 주차장에 차를 대각선으로 주차할 수 있는 것과 같습니다. 가능하기 때문입니다!

고급 그리드 기술: 내면의 건축가를 깨우세요

한 단계 더 발전할 준비가 되셨나요? CSS 그리드는 단순히 항목을 상자에 넣는 것이 아닙니다. 전체 레이아웃을 정확하고 쉽게 만드는 것이 중요합니다.

1. 중첩 그리드

그리드 내의 그리드로 생각하세요. 레이아웃 가능성의 시작입니다.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

여기서 .nested-grid는 메인 그리드 내부의 그리드 항목이자 그리드 컨테이너 자체이기도 하여 훨씬 더 복잡한 레이아웃을 만들 수 있습니다.

2. 자동 채우기 및 자동 맞춤

사용 가능한 공간에 따라 그리드를 조정하고 싶으십니까? 자동 채우기 및 자동 맞춤을 만나보세요.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

이 설정은 너비가 150px 이상인 가능한 한 많은 열을 자동으로 생성합니다. 고양이가 항상 제 발로 착지하는 것처럼 콘텐츠가 우아하게 조정되기를 원하는 반응형 디자인에 적합합니다.

마무리

CSS Grid는 강력하면서도 유연한 레이아웃을 만들기 위한 최고의 도구입니다. 처음에는 다소 벅차게 보일 수도 있지만, 일단 익숙해지면 그것 없이 어떻게 살았는지 궁금해하게 될 것입니다. Grid를 사용하면 단순히 웹페이지를 구축하는 것이 아닙니다. 당신은 시각적으로 놀랍고 잘 정리된 걸작을 만들고 계십니다.

즐거운 코딩하세요!