CSS 그리드 튜토리얼 - 아름답고 단순한 반응형 레이아웃 3개 구축

3개의 반응형 CSS 그리드 예제를 만들어 이 강력한 레이아웃 시스템의 기본 사항을 마스터하세요.

k-평균 이미지 분할

반응형 12열 부트스트랩 교체.
모자이크 사진 갤러리입니다.
엇갈린 애니메이션 그리드.

다음 단원에는 CSS 그리드 레이아웃의 세 가지 예가 포함되어 있습니다.

부트스트랩 스타일 12열 그리드

그리드는 반응형 행/열 레이아웃을 구축하는 데 필요한 코드의 양을 크게 줄일 수 있습니다. 부트스트랩과 같은 플렉스 기반 그리드와 달리 마크업에 많은 클래스가 필요하지 않아 자식이 반응할 수 있습니다.

아래 그리드는 절대적인 행이나 열의 정확한 수를 미리 알지 못하기 때문입니다. 대신 CSS가 장치 크기에 따라 사용 가능한 공간을 채우도록 합니다.

HTML

1 2 3 4 5 6 7 8 9 10 11 12

CSS

.basic-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

반응형 사진 갤러리

다음 그리드는 사진이 여러 셀을 차지할 수 있는 반응형 사진 갤러리입니다. 이전 예와 마찬가지로 암시적 그리드이기도 합니다.

HTML

1 2 3

CSS

.photo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 240px; } /* Medium screens */ @media screen and (min-width: 600px) { .card-tall { grid-row: span 2 / auto; } .card-wide { grid-column: span 2 / auto; } }

애니메이션 명시적 그리드

세 번째 격자 예는 각 요소가 이름별로 특정 영역에 배치되는 4x4 명시적 격자입니다. |_+_| 속성은 |_+_|를 일치시켜 그리드에 요소를 배치할 수 있습니다. 자녀에 대한 재산.

tp링크 re220 설정

HTML

grid-template-areas

CSS

grid-area

#css #webdev #html

www.youtube.com