CSS 그리드에 대한 궁극의 실용 가이드
CSS 그리드의 주요 목표는 그리드 시스템을 기반으로 사용자 인터페이스를 디자인하는 방식을 완전히 바꾸는 것입니다. Grid는 우리가 영원히 해결해 온 레이아웃 문제를 해결하기 위해 특별히 만들어진 최초의 CSS 모듈입니다.
제목에서 알 수 있듯이 이것은 실용적인 가이드이므로 개념은 거의 없이 많은 코드/예제를 보여드리겠습니다. CSS 그리드 개념에 대해 더 알고 싶거나 배우고 싶다면 몇 가지 자료를 추천해 드리겠습니다.
⚠️ 먼저 알림! Grid와 Flexbox는 적이 아닙니다. 그것들은 함께 완벽하게 작동할 수 있으며, 언제 어느 것을 사용해야 하는지 알면 됩니다.
Flexbox: 기본적으로 항목을 하나의 차원(행 또는 열)에 넣기 위한 것입니다.
그리드: 두 차원으로 작업할 때 사용됩니다.
다이빙하자!
Note: I highly recommend you check the CodePens embed here in this article. Go there and play a little bit with the code 🕹️
1. 보스처럼 중앙에 배치
나는 당신이 이미 항목을 중심에 두는 데 많은 어려움을 겪었을 것이라고 확신합니다. 두 줄의 코드만 있으면 됩니다.
a
parent div 와 a child div 가 있다고 가정하면 다음과 같이 할 수 있습니다..parent {
display: grid;
place-items: center;
}
CodePen 예시:
2. 반복 + 그리드-템플릿-열
CSS Grid에는 몇 가지 강력한 기능과 속성이 있습니다. 그 중 두 개는
repeat [MDN Docs] 및 grid-template-columns 이며 멋진 그리드를 만드는 데 많은 도움이 될 수 있습니다.repeat는 매우 간결한 형식을 사용하여 많은 수의 열 또는 행이 반복 패턴이 되도록 허용합니다.다음과 같이 그리드 템플릿을 만들 수는 있지만 만들면 안 됩니다.
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
또는
repeat를 사용하여 다음과 같이 만들 수 있습니다..parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
훨씬 낫죠? 😊
CodePen 예시:
3. 무한 응답 그리드
동일한 크기의 항목으로 가득 찬 반응형 그리드를 만들고 싶다면 세 줄의 CSS를 사용하여 이를 달성할 수 있습니다.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
CodePen 예시:
4. 기본 레이아웃 오거나이저
간단한 방법으로 레이아웃을 구성하고 싶다면 어떻게 해야 할까요? 다음과 같은 표준이 있습니다.
매우 쉽고 거의 불편하지 않습니다! (누군가 참조를 얻었습니까?)
grid-template-areas 및 grid-area만 사용하여 페이지를 구성하면 됩니다!HTML은 다음과 같을 수 있습니다.
<body>
<container>
<header>Header</header>
<article>Article</article>
<aside>Sidebar</aside>
<nav>Ads</nav>
<footer>Footer</footer>
</container>
</body>
그리고 CSS는 다음과 같습니다.
container {
display: grid;
height: 100%;
/* Explicit grid */
grid-template-areas:
"topbar topbar topbar"
"sidebar content ads"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 15% 50% 20%;
gap: 35px;
}
header { grid-area: topbar; }
aside { grid-area: sidebar; }
article { grid-area: content; }
nav { grid-area: ads; }
footer { grid-area: footer; }
결과:
CodePen 예시:
5. 그리드 + 플렉스박스 = 💞
이 두 사람이 어떻게 마카로니와 치즈처럼 잘 어울릴 수 있는지에 대한 약간의 증거일 뿐입니다.
그리드를 사용하여 페이지 자체를 디자인하고 flexbox를 사용하여 카드 자체를 구성합니다. 그리고 당연히 반응성이 좋습니다.
container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
}
CodePen 예시:
6. 놀라운 사진 갤러리
마무리하기 위해 아름다운 사진 갤러리를 만드는 작은 코드를 보여드리겠습니다 📷✨
또 다른 좋은 점은 그리드에 애니메이션을 적용할 수 있다는 것입니다! 강력한
grid-template-areas , grid-area 및 CSS 애니메이션을 사용하여 멋진 효과를 만들 수 있습니다..animated-grid {
display: grid;
gap: 1rem;
height: 85vh;
margin-bottom: 200px;
grid-template-areas:
'a b c d'
'l 🌟 🌟 e'
'k 🌟 🌟 f'
'j i h g';
grid-template-rows: repeat(4, 25%);
grid-template-columns: 240px auto auto 240px;
--standard-delay: 100ms;
}
.card {
background-color: rgb(36, 243, 147);
animation: cardEntrance 700ms ease-out;
animation-fill-mode: backwards;
}
그리고 예, 이모티콘을 사용하여 지역 이름을 지정할 수도 있습니다.
CodePen 예: (더 나은 시각화를 위해 0.5x 배율을 클릭하거나 CodePen 페이지 자체를 방문하십시오.)
그게 다야!
읽어주셔서 감사합니다. 읽기가 즐거웠거나 새로운 것을 배웠다면 ❤️ 버튼을 누르는 것을 잊지 마세요!
CSS 그리드에 대해 자세히 알아볼 수 있는 유용한 리소스:
Reference
이 문제에 관하여(CSS 그리드에 대한 궁극의 실용 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/richardnikolas/the-ultimate-practical-guide-to-css-grid-32oe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
