CSS 그리드로 응답 성 레이아웃 생성

Feb 10, 2026

어떻게

CSS 그리드 레이아웃 브라우저 지원에서 매일 커지고 있으며 CSS 그리드를 생산에 배송 할 수 있습니다. CSS 그리드의 빠른 채택은 정말로 놀랍습니다.

CSS Grid가있는 반응 형 포트폴리오 사이트 레이아웃을 만들기 전에 몇 가지 일을 분명히합시다 : CSS 그리드는 대체되지 않습니다. FlexBox. ...에 플로트를 대체하는 것이 아닙니다. 실제로 CSS Grid가 훨씬 나아지는 일을하기 위해 FlexBox를 사용해 왔음을 알 수 있습니다. 그러나 교체 측면에서 생각하는 대신 우리는 조합 측면에서 생각할 수 있습니다.

15 정말 유용한 반응 형 웹 디자인 자습서

땅콩 버터와 젤리 샌드위치를 상상해보십시오. 땅콩 버터와 젤리는 자신의 것에 꽤 훌륭하지만, 그들이 함께 할 때, 새로운 일이 태어 났고 마술은 일어난다.

이것은 우리의 것입니다 웹 사이트 레이아웃 도구는 같습니다. 그들은 개별적으로하는 일에 훌륭하지만, 그들이 결합 될 때 마술이 일어나고 있으며 새롭고 흥미로운 레이아웃을 만들 수 있습니다. 이 경우 CSS Grid 및 FlexBox를 사용하여 자체 웹 개발 PB 및 amp; j를 만듭니다. 프로세스를 더욱 단순화하고 싶습니까? 괜찮은 것을 선택하십시오 웹 사이트 빌더 ...에

01. 당신의 마크 업을 설정하십시오

case study title repeated — 우리의 레이아웃은별로 보이지 않지만 우리 6 개 항목과의 해골이 제자리에 있습니다.

이 자습서에서는 CSS Grid와 Flexbox를 사용하여 응답 성 포트폴리오 레이아웃을 만듭니다. 이 상자 각각은 다른 크기이며, 일부는 행을 가로 질러 스팬이 있으며 각 상자에는 하단에 앉아있는 제목이 있습니다. FlexBox가있는 훌륭한 정렬 도구 중 일부를 사용하여 그런 일이 발생합니다.

마크 업을 설정하여 시작합시다.

 & lt; UL 클래스 = "상자"& gt;
  & lt; li & gt;
    & lt; div class = "boxes__text-wrapper"& gt;
      & lt; h2 & gt; 사례 연구 제목 & lt; / h2 & gt;
      & lt; P & gt; 우리의 사례 연구에 대한 캐치 묘사. 우리는 열심히 일했습니다. & lt; / p & gt;
    & lt; / div & gt;
  & lt; / li & gt;
& lt; / ul & gt;

우리는 해당 목록 항목과 6 회 모든 것을 복제 할 수 있도록 우리에게는 게임 항목이 있습니다. 궁금해 할 경우를 대비하여, 우리는 ul. 요소 목록 목록이기 때문에 여기에 요소가 있습니다. 당신에게 권리가있는 것을 자유롭게 사용할 수 있습니다.

목록 항목 내부에 우리는 A를 가지고 있습니다 이면 클래스와 함께 .boxes__text-wrapper. 이는 사례 연구의 제목과 첨부 된 설명을 포함 할 것입니다.

02. 기본 스타일 작성

case study title with different styling — 우리는 글꼴을 조금 더 좋은 것으로 설정하고 표제와 단락에서 기본 여백을 제거했습니다.

이제 몇 가지 기본 스타일을 설정하여 작업하십시오.

 몸체 {
  글꼴 - 가족 : Avenir, Sans-serif;
  마진 : 2REM 자동;
  너비 : 95 %;
}
H2,
p {
  마진 : 0;
}
UL {
  목록 스타일 : 없음;
  패딩 : 0;
  마진 : 0;
}
.boxes & gt; * {
  패딩 : .5rem;
  배경색 : # 333;
  색상 : 흰색;
}

우리는 글꼴을 Avenir로 변경했습니다. 우리는 머리말과 단락에서 여백을 제거하고 정렬되지 않은 목록을 재설정합니다. 우리는 각 목록 항목을 기본 스타일로 제공하여 각각의 위치를 볼 수 있도록 도와줍니다.

03. 그리드를 설정하십시오

case study title with gaps between them — 3 개의 줄 만 있으면 그리드 아이템 사이에 거터를 첨가하고 조금 키가 크게 만들었습니다.

우리는 먼저 모바일 레이아웃을 만들고 싶습니다. 작은 화면에서 그리드를 설정하는 것은 다음과 같습니다.

 .BOXES {
  디스플레이 : 그리드;
  그리드 - 자동 행 : minmax (125px, auto);
  그리드 갭 : .5REM;
}

그리드는 기본적으로 하나의 열만 있으므로 우리의 항목을 서로 겹쳐집니다. 우리는 사용하여 각 사례 연구간에 공간을 만듭니다. 그리드 - 갭 - 이것은 우리가 행과 열 사이에 거터를 추가 할 수 있습니다.

복잡해가 필요한 것만으로 여백을 추가하는 것을 잊어 버리십시오. 뉴 - 아동 셀렉터; 거터는 열이나 행 사이에만 표시되며 열 이후 또는 앞에 나가기 전에 low.grid-갭 속기가 있습니다 그리드 컬럼 갭 과 그리드 - row-갭 ...에 일반적으로 우리는 롱앤 롱과 우리는 브라우저가 자라기 때문에 둘 다 겹쳐 쓸 것입니다. 그래서 ShrootHand를 사용할 것입니다.

다음으로 사용할 것입니다 그리드 - 자동 행 그리드 컨테이너에 새로운 행의 높이를 알려줍니다. 그리드는 모든 콘텐츠를 배치하기 위해 새로운 행을 만듭니다. 우리는 이러한 자동으로 생성 된 행의 크기를 제어 할 수 있습니다. 그리드 - 자동 행 특성. 우리는 새로운 기능을 사용할 수 있습니다 : 최소 최대() ...에 와 최소 최대() 최소 크기와 최대 크기를 지정할 수 있습니다.

우리 코드로 우리는 열이 최소한 120px이고 최대 자동으로 최소한을 원합니다. 우리는 콘텐츠가 그것을 보증하는 경우 우리의 행이 성장하기를 원하기 때문에 자동을 사용하고 있습니다.

04. 큰 브라우저 호환성을 설정하십시오

case study title in a row — 우리 그리드가 모양을 찍고 있습니다! 우리는 그리드 아이템 사이의 거터와 함께 작동하는 6 개의 열이 있습니다.

브라우저가 40em 이상인 경우 그리드 컨테이너는 각각 하나의 분수의 6 개의 열이 있도록 페이지를 설정했습니다.

 @media 화면 및 (최소 폭 : 40em) {
  .boxes {
    그리드 - 템플리트 - 열 : 반복 (6, 1fr);
    그리드 갭 : 2px;
  }
}

그리드 - 템플릿 열 우리가 그리드를 알려주는 재산이 얼마나 많은 열이 존재 해야하는지 알려줍니다. 그것은 우리가 알고있는 모든 길이 단위를 받아들입니다. rem. , 여자 이름 , px. , 백분율, vw. , vh. 과 ...에 ... 않다 ...에

그만큼 ...에 ... 않다 CSS 그리드 레이아웃을 사용하는 새 장치입니다. 그것으로 우리는 브라우저가 우리 대신 수학을 할 수 있습니다.

브라우저에 하나의 분수의 6 열을 만들려면 브라우저가 그리드 컨테이너의 너비를 계산하고 6 개의 동일한 열로 분할합니다. 또한 그리드가 똑똑하기 때문에 우리가 지정한 거터를 계산 한 후에 남은 공간 만 나누어줍니다.

05. 스타일의 개별 항목

case study title with an image behind — 커피는 모든 것이 멋지게 보이게하지 않습니까? 또한 미묘한 그라디언트는 우리의 제목과 설명을 돋보이게합니다.

우리의 사례 연구는 그레이 박스만큼 조금 draw를 보입니다. 배경 이미지를 추가 하고이 상자의 맨 아래에 표시하고 그라디언트를 추가하여 제목이 돋보이게하십시오.

 .Boxes Li {
  배경 이미지:
    선형 그라디언트 (RGBA (0,0,0,0), RGBA (0,0,0,0.8)),
    URL (경로 / to / 이미지);
  배경 크기 : 덮개;
  디스플레이 : 플렉스;
  정렬 항목 : 플렉스 엔드;
}

이 배경 이미지는 무료 이미지였습니다 unsplash. ,하지만 원하는 이미지를 자유롭게 사용할 수 있습니다. 나는 또한 우리의 텍스트를 우리의 상자의 바닥에 맞추기 위해 flexbox를 믹스에 가져오고 있습니다. 당신은 아직 그것을 보지 못할 것입니다. 그러나 우리가 각각 다른 상자를 배치하면 결국 그것은 일을 볼 수 있습니다.

06. 눈금에 항목을 놓습니다

case study title with one image above and five below — 그리드를 사용하면 그리드 항목을 쉽게 사용할 수 있지만 우리는 원합니다. 그러나 이것은 단지 처음 일뿐입니다

불행히도 그리드에는 처음에 보았던 그리드 레이아웃에 항목을 자동으로 배치 할 수있는 방법이 없습니다. 그러나 우리를 위해 다행히도 그리드는 우리에게 수동으로 쉽게 할 수있는 도구를 제공합니다. 이 튜토리얼에서는 각 목록 항목을 배치하기 위해 n 번째 자식을 사용합니다. 프로덕션 웹 사이트에서는 올바른 계획이 주어지면 콘텐츠 무거운 사이트에서 이와 같은 레이아웃을 자동화 할 수있는 클래스를 사용하는 것이 좋습니다.

우리 첫 번째 항목을 시작하자.

 @media 화면 및 (최소 폭 : 40em) {
  .BOXES LI : NTH-CHILD (1) {
    그리드 열 : 1 / -1;
    그리드 - 행 : 스팬 3;
  }
}

우리 가이 레이아웃이 40em 이상 이어서이 레이아웃을 원하기 때문에 이전에 쓴 미디어 쿼리 내부에 우리가 쓴 모든 배치 스타일을 모두 넣을 것입니다. 와 뉴 - 아동 우리는 첫 번째 목록 항목을 목표로합니다. CSS Grid를 사용하면 눈금 열과 그리드 행이있는 항목을 쉽게 배치 할 수 있습니다. 항목이 어디에 있어야하는지 지정할 수있는 여러 가지 방법이 있지만 여기에서는 열 라인 1에서 시작하여 -1을 사용하여 전체 컨테이너를 확장합니다.

그런 다음 그리드 행을 사용하여 항목에 3 개의 행을 확장하도록 알려줍니다. 우리는 세 줄이 우리가 원하는 크기가 될 것이라는 것을 어떻게 알 수 있습니까? 글쎄, 우리는 잠시 전에 그리드 자동 행 으로이 행의 크기를 지정했으며, 우리가 만족도가 아니더라면 최소 크기를 변경할 수 있습니다.

나머지 항목을 두자.

@Media 화면 및 (최소 너비 : 40em) {
  .Boxes Li : n 번째 자녀 (2) {
    그리드 열 : 스팬 2;
    그리드 - 행 : SPAN 7;
  }

  .Boxes Li : n 번째 - 아이 (3) {
    그리드 열 : 스팬 4;
    그리드 - 행 : 스팬 3;
  }

  .Boxes Li : n 번째 - 어린이 (4) {
    그리드 열 : 스팬 2;
    그리드 - 행 : 스팬 4;
  }

  .BOXES LI : NTH-CHILD (5),
  .BOXES LI : NTH-CHILD (6) {
    그리드 열 : 스팬 2;
    그리드 - 행 : 스팬 2;
  }
}

얼마나 많은 컨트롤 그리드 레이아웃이 우리에게 제공하는지 놀라운 일이 아닙니까? 몇 줄의 코드 만 있으면 더 이상 항목이 추가되면 깨지지 않는 완전히 반응 형 레이아웃을 함께 사용할 수 있습니다.

물론, 그들은 단지 하나의 그리드 열과 행을 기본적으로 가져갈 것이지만, 우리의 레이아웃을 끊지는 않습니다. 우리가이를 부유물, 너비와 높이가 고정 된 경우 더 많은 콘텐츠를 추가 할 경우 바인딩에있을 것입니다.

finished layout with different images in different places — 우리의 완성 된 레이아웃! 이 놀라운 것이 아닌가? 그리드를 사용하면 품목을 2 차원으로 쉽게 배치 할 수 있습니다.

오래된 브라우저에 대해 빠르게 제쳐 둡니다

Ok, 방안에 코끼리를 해결할 시간입니다. '더 오래된 브라우저는 무엇입니까?'이 질문에 대한 답변은 CSS의 새로운 기능과 동일합니다. 기능 쿼리를 사용하고 캐스케이드를 포용하십시오. 기능 쿼리가 있습니다 아주 잘 지원됩니다 그리고 그들이 어디에 있는지, 우리는 먼저 우리의 폴백을 놓을 수 있습니다. 예를 들어, 우리는 다음 줄을 쓸 것입니다.

. 당신의 선택기 {
  디스플레이 : 플렉스;
}

/ * 그리드 코드 * /
@Supports (디스플레이 : 그리드) {
  디스플레이 : 그리드;
  그리드 - 템플릿 - 열 : (3, 1fr);
  그리드 - 갭 : 1REM 2REM;
}

이 방법으로 코드를 작성하면 브라우저가 그리드 레이아웃을 이해하는 경우 FlexBox 대신 사용할 수 있습니다. 또한 캐스케이드를 수용하기 때문에 기능 쿼리를 이해하지 못하는 브라우저는 무시하고 이미 필요한 정보가 이미 있습니다. 우리는 스타일을 평소보다 조금 더 많이 쓰는 방법을 계획해야 할 수도 있습니다. 그러나 그것을 일으킴으로써 우리는 현명한 대체로 위대한 레이아웃을 만들 수 있습니다. 이전 페이지를 저장하려면 PDF로 내보내고 저장하십시오. 클라우드 스토리지 ...에

또한 시간이 계속되면서 CSS 그리드에 대한 점점 더 많은 지원이있을 것입니다. 나중에 우리의 폴백을 삭제하고 모든 그리드 관련 CSS를 그대로 두는 것이 얼마나 훌륭한 지 생각해보십시오. 그리드에 대한 자세한 내용을 알 수 있듯이 많은 줄의 CSS가 많이있는 많은 일을 많이 수행 할 수 있습니다. 특히 복잡한 사이트를 가지고 있다면 웹 호스팅 서비스는 긁어 져야합니다.

이 기사는 원래 나타났습니다 그물 잡지 , 개발자와 웹 디자이너를위한 세계 최고의 잡지. 여기를 구독하십시오 ...에

자세히보기 :

CSS 그리드 레이아웃 비밀이 드러났습니다
30 웹 디자인 도구가 워크 플로우를 가속화합니다
CSS 그리드가있는 패션 유연한 레이아웃

CSS 그리드로 응답 성 레이아웃 생성

01. 당신의 마크 업을 설정하십시오

02. 기본 스타일 작성

03. 그리드를 설정하십시오

04. 큰 브라우저 호환성을 설정하십시오

05. 스타일의 개별 항목

06. 눈금에 항목을 놓습니다

오래된 브라우저에 대해 빠르게 제쳐 둡니다

어떻게 - 가장 인기있는 기사

Amazon Prime Day를 피하는 방법 2020 실패

Facebook 개인 정보 설정 : 프로필 개인을 유지하는 방법

Adobe XD로 프로토 타입 빌드

10 가지가 Photoshop과 함께 할 수있는 10 가지

동물의 눈을 설명하는 방법

3D 인쇄를위한 작업 준비 : 8 탑 팁

Photoshop에서 애니메이션 웹 배너를 만드는 방법

프로토 타입 PIXTATE의 플로팅 액션 버튼

카테고리