찾다
웹 프론트엔드CSS 튜토리얼표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

이 글에서는 그리드 레이아웃의 그리드 생성을 소개합니다. 하지만 반응형 페이지를 만들 때 그리드의 너비를 페이지의 나머지 너비로 조정하거나 표시할 수 있습니다. 지역.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

이 글에서는 페이지 너비와 디스플레이 너비가 반응형일 때, 디스플레이 너비에 따라 그리드 셀의 너비를 표현하는 코드를 소개하겠습니다.

가장 먼저 알아야 할 것은 반응형 그리드 셀을 생성하려면 fr 단위를 사용할 수 있다는 것입니다.

구체적인 예를 살펴보겠습니다

코드는 다음과 같습니다.

SimpleGridPxFr.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 1fr;    
    grid-template-rows: 120px 120px;
    border:solid #ff6a00 1px;
    }
.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
    }
.GridItem2 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ffcb70;
    }
.GridItem3 {
    grid-column: 3 / 4;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
    }
.GridItem4 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #b0ff70;
    }
.GridItem5 {
    grid-column: 1 / 2;    
    grid-row: 2 / 3;    
    background-color: #7ee68d;
    }
.GridItem6 {
    grid-column: 2 / 3;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
    }
.GridItem7 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color:#95a7f5;
    }
.GridItem8 {
    grid-column: 4 / 5;    
    grid-row: 2 / 3;    
    background-color: #d095f5;
    }

SimpleGridPxFr.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridPxFr.css" />
</head>
<body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
    <div class="GridItem4">内容4</div>
    <div class="GridItem5">内容5</div>
    <div class="GridItem6">内容6</div>
    <div class="GridItem7">内容7</div>
    <div class="GridItem8">内容8</div>
  </div>
</body>
</html>

지침:

Container 클래스의 코드는 다음과 같습니다. 그리드의 레이아웃은 4열 2행입니다. 열 1부터 열 3까지의 그리드는 160픽셀의 고정 너비 셀입니다. 4열의 가장 오른쪽 셀에는 너비 1fr이 할당되어 나머지 표시 너비의 너비가 됩니다.

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 1fr;    
    grid-template-rows: 120px 120px;
    border:solid #ff6a00 1px;
    }

실행 결과

웹 브라우저를 사용하여 위 HTML 파일을 표시하세요. 아래와 같은 효과가 표시됩니다. 그리드 왼쪽에 160픽셀 너비의 열 3개를 표시하고, 네 번째 셀에는 페이지 너비의 나머지 너비가 표시됩니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

웹 브라우저의 창 너비를 줄이세요. 왼쪽의 3개 열은 너비가 160픽셀로 고정되어 있습니다. 가장 오른쪽 네 번째 열 셀의 너비는 창 너비에 따라 줄어듭니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.


네 번째 열의 셀 너비는 창 너비에 따라 좁아지지만 최소 너비 이상입니다. 창 너비를 최소 너비에서 줄이면 가로 스크롤 막대가 나타납니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

fr의 셀이 여러 개인 경우의 예

코드는 다음과 같습니다

다음 HTML과 CSS 코드를 작성하세요.

SimpleGridPxEmFr.css

.Container {
    display: grid;    
    grid-template-columns: 160px 2fr 16em 1fr;    
    grid-template-rows: 120px 120px;
    border:solid #ff6a00 1px;
    }
.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
    }
.GridItem2 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ffcb70;
    }
.GridItem3 {
    grid-column: 3 / 4;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
    }
.GridItem4 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #b0ff70;
    }
.GridItem5 {
    grid-column: 1 / 2;    
    grid-row: 2 / 3;    
    background-color: #7ee68d;
    }
.GridItem6 {
    grid-column: 2 / 3;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
    }
.GridItem7 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color:#95a7f5
    }
.GridItem8 {
    grid-column: 4 / 5;    
    grid-row: 2 / 3;    
    background-color: #d095f5;
    }

SimpleGridPxEmFr.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridPxEmFr.css" />
</head>
<body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
    <div class="GridItem4">内容4</div>
    <div class="GridItem5">内容5</div>
    <div class="GridItem6">内容6</div>
    <div class="GridItem7">内容7</div>
    <div class="GridItem8">内容8</div>
  </div>
</body>
</html>

그리드 레이아웃 프레임의 셀 너비는 160픽셀, 2fr, 16em, 1fr로 설정됩니다. 160픽셀과 16em은 고정 너비이므로 첫 번째와 세 번째 열은 고정 셀이 되고 두 번째와 네 번째 열 셀은 반응형이 됩니다. 2fr과 1fr의 너비는 2:1입니다.

.Container {
    display: grid;    
    grid-template-columns: 160px 2fr 16em 1fr;    
    grid-template-rows: 120px 120px;
    border:solid #ff6a00 1px;
    }

실행 결과

웹 브라우저를 사용하여 위 HTML 파일을 표시하세요. 아래와 같은 효과가 표시됩니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

창 너비를 줄이면 fr로 지정된 셀이 더 좁아집니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

1fr과 2fr 단위의 경우 너비가 1:2 비율로 줄어듭니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.

위 내용은 표시 영역의 너비에 반응하는 그리드 레이아웃(px와 fr의 혼합 그리드)에서 그리드를 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
블루 비니 데이 2019블루 비니 데이 2019Apr 13, 2025 am 09:25 AM

11 월 30 일, 공식 "Blue Beanie Day"가왔다 갔다했습니다. 나는 내가 정확한 정신을 grokked 다지 확신 할 수 없지만 그것이 무엇을 의미하는지에 대해 글을 썼다.

원시 그래프 QL 쿼리원시 그래프 QL 쿼리Apr 13, 2025 am 09:22 AM

GraphQL에는 모든 종류의 멋진 툴링이 제작되었습니다. 그러나 웹의 모든 것과 마찬가지로 궁극적으로 데이터 촬영으로 내려집니다. ' OL '를 가로 질러; 네트워크 및

PSA : 사이트에서 저작권 연도를 업데이트 할 시간이 있습니다.PSA : 사이트에서 저작권 연도를 업데이트 할 시간이 있습니다.Apr 13, 2025 am 09:21 AM

매년 이시기에 나는 사람들에게 웹 사이트에서 저작권을 업데이트하는 방법을 사람들에게 상기시켜주는 기사를보고 있습니다. 바닥 글의 어딘가에. 너

Markdown에 내장 된 콘텐츠Markdown에 내장 된 콘텐츠Apr 13, 2025 am 09:12 AM

Markdown은 HTML을 지원하므로 YouTube 비디오를 포함 해야하는 경우 포함 코드를 복사하여 붙여 넣으면 Markdown 문서에 놓을 수 있습니다.

우리가 무엇을 읽고, 2019 년우리가 무엇을 읽고, 2019 년Apr 13, 2025 am 09:10 AM

따라서 인터넷에서 읽을 많은 것들이 있습니다. 실제로 많은 사람들이 모든 것을 따라 잡기가 어렵습니다.

Google 글꼴을 태그하고 Goofonts.com을 작성한 방법Google 글꼴을 태그하고 Goofonts.com을 작성한 방법Apr 12, 2025 pm 12:02 PM

Goofonts는 개발자 부인과 디자이너 남편이 서명 한 사이드 프로젝트로, 둘 다 타이포그래피의 큰 팬입니다. 우리는 Google에 태그를 지정했습니다

시대를 초월한 웹 개발 기사시대를 초월한 웹 개발 기사Apr 12, 2025 am 11:44 AM

Pavithra Kodmad

섹션 요소와의 거래섹션 요소와의 거래Apr 12, 2025 am 11:39 AM

두 기사가 정확히 같은 날에 출판되었습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)