CSS 그리드를 중심으로

179

CSS Grid를 사용하여 간단한 페이지를 만들려고합니다.

내가 실패한 것은 HTML에서 해당 그리드 셀로 텍스트를 중앙에 배치하는 것입니다.

및 선택기 div의 내부와 외부 에서 별도 의 콘텐츠를 배치 하고 CSS 속성 중 일부를 사용하여 아무 소용이 없었습니다.left_bgright_bg

어떻게해야합니까?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

스 니펫 확장

— 비트 루트
소스

w3.org/Style/Examples/007/center.en.html 링크를 확인하십시오 . 도움이 되길 바랍니다.

— Ali

433

이 답변에는 두 가지 주요 섹션이 있습니다.

CSS 그리드에서 정렬이 작동하는 방식 이해
CSS 그리드를 중심으로하는 6 가지 방법.

솔루션에만 관심이 있다면 첫 번째 섹션을 건너 뛰십시오.

그리드 레이아웃의 구조와 범위

그리드 컨테이너에서 센터링이 작동하는 방식을 완전히 이해하려면 먼저 그리드 레이아웃의 구조와 범위를 이해해야합니다.

그리드 컨테이너 의 HTML 구조 에는 세 가지 수준이 있습니다.

컨테이너
물건
내용

이러한 각 수준은 그리드 속성 적용 측면에서 다른 수준과 독립적입니다.

그리드 컨테이너 의 범위 는 부모-자식 관계로 제한됩니다.

즉, 그리드 컨테이너는 항상 상위이고 그리드 항목은 항상 하위입니다. 그리드 속성은이 관계 내에서만 작동합니다.

자식 이외의 격자 컨테이너의 자손은 격자 레이아웃의 일부가 아니며 격자 속성을 허용하지 않습니다. (적어도 subgrid기능이 구현 될 때까지는 그리드 항목의 하위 항목이 기본 컨테이너의 라인을 존중할 수 있습니다.)

위에서 설명한 구조 및 범위 개념의 예는 다음과 같습니다.

틱택 토와 같은 격자를 상상해보십시오.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

X와 O가 각 셀의 중심에 오기를 원합니다.

따라서 컨테이너 레벨에서 중심을 적용하십시오.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

그러나 그리드 레이아웃의 구조와 범위로 justify-items인해 컨테이너에서 컨텐츠가 아닌 그리드 항목을 중앙에 배치 합니다 (적어도 직접적이지는 않음).

코드 스 니펫 표시

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

스 니펫 확장

같은 문제 align-items: 콘텐츠가 부산물로 중심에있을 수 있지만 레이아웃 디자인이 손실되었습니다.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

코드 스 니펫 표시

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

스 니펫 확장

콘텐츠를 중앙에 배치하려면 다른 접근 방식이 필요합니다. 그리드 레이아웃의 구조와 범위를 다시 참조하려면 그리드 항목을 부모로, 내용을 자식으로 취급해야합니다.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

코드 스 니펫 표시

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

스 니펫 확장

jsFiddle 데모

CSS 그리드를 중심으로하는 6 가지 방법

모눈 항목과 내용을 중앙에 맞추는 방법에는 여러 가지가 있습니다.

기본 2x2 그리드는 다음과 같습니다.

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


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

플렉스 박스

그리드 항목의 내용을 간단하고 쉽게 가운데에 맞추려면 flexbox를 사용하십시오.

보다 구체적으로, 그리드 아이템을 플렉스 컨테이너로 만든다.

이 방법에는 충돌, 사양 위반 또는 기타 문제가 없습니다. 깨끗하고 유효합니다.

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

코드 스 니펫 표시

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

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

자세한 설명은이 게시물을 참조하십시오.

Flexbox에서 요소를 세로 및 가로로 가운데에 배치하는 방법

그리드 레이아웃

플렉스 아이템이 플렉스 컨테이너 일 수있는 것과 같은 방식으로, 그리드 아이템은 또한 그리드 컨테이너 일 수있다. 이 솔루션은 센터링이 플렉스가 아닌 그리드로 수행된다는 점을 제외하고는 위의 플렉스 박스 솔루션과 유사합니다.

코드 스 니펫 표시

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

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

`auto` 여백

margin: auto격자 항목을 세로 및 가로로 가운데에 배치하는 데 사용 합니다.

grid-item {
  margin: auto;
}

코드 스 니펫 표시

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

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

모눈 항목의 내용을 가운데에 배치하려면 항목을 모눈 (또는 flex) 컨테이너로 만들어야하고 익명 항목을 자체 요소로 래핑 하고 (CSS에서 직접 타겟팅 할 수 없기 때문에 ) 여백을 새 요소에 적용해야합니다.

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

코드 스 니펫 표시

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

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

상자 정렬 속성

격자 선 항목을 정렬하기 위해 다음 속성 사용을 고려할 때는 auto위의 여백 섹션을 읽으십시오 .

align-items
justify-items
align-self
justify-self

https://www.w3.org/TR/css-align-3/#property-index

`text-align: center`

격자 항목에서 내용을 가로로 가운데에 맞추려면 text-align속성을 사용할 수 있습니다 .

코드 스 니펫 표시

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

수직 센터링의 경우 vertical-align: middle작동하지 않습니다.

vertical-align속성이 인라인 및 테이블 셀 컨테이너에만 적용 되기 때문 입니다.

코드 스 니펫 표시

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

display: inline-grid인라인 레벨 컨테이너 를 설정 한다고 말할 수도 있습니다 . 그렇다면 vertical-align그리드 항목에서 작동 하지 않는 이유는 무엇입니까?

그 이유는에 있다는 것이다 그리드 포맷 컨텍스트 , 항목 블록 레벨 요소로 취급된다.

6.1. 그리드 아이템 디스플레이

display그리드 항목 의 값이 차단됩니다 . display그리드 컨테이너를 생성하는 요소의 인플 로우 하위 항목이 지정된 인라인 레벨 값이면 해당 블록 레벨에 해당하는 값으로 계산됩니다.

A의 블록 서식 환경 의 어떤 vertical-align속성이 원래 설계되었습니다는 브라우저가 인라인 수준의 컨테이너에 블록 레벨 요소를 찾을 것을 기대하지 않습니다. 유효하지 않은 HTML입니다.

CSS 포지셔닝

마지막으로 그리드에서도 작동하는 일반적인 CSS 센터링 솔루션이 있습니다 : 절대 위치

문서 흐름에서 제거해야하는 개체를 중앙에 배치하는 데 좋은 방법입니다. 예를 들어, 원하는 경우 :

position: absolute중앙에 배치 할 요소와 position: relative포함 블록으로 사용될 조상 (일반적으로 부 모임) 에 간단히 설정 하십시오 . 이 같은:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

코드 스 니펫 표시

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

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

스 니펫 확장

이 방법의 작동 방식에 대한 완전한 설명은 다음과 같습니다.

특히 화면 크기를 조정할 때 요소가 중앙에 유지되지 않습니다.

그리드 스펙에서 절대 위치에 대한 섹션은 다음과 같습니다.

https://www.w3.org/TR/css3-grid-layout/#abspos

— 마이클 벤자민
소스

안녕하세요 마이클, 그리드를 사용하여 각 열의 크기를 행에서 가장 작은 열의 크기로 조정하는 것이 가능한지 궁금합니다.

— The Codesee

@TheCode 모든 요구 사항에 따라 가능할 수 있습니다. 코드 샘플이 있습니까? 또는 모든 세부 사항이 포함 된 새 질문을 게시 해보십시오.

— 마이클 벤자민

입니다 grid-container및 grid-item있는 HTML 태그?

— diEcho

그들은있는 사용자 정의 HTML 태그입니다. 이 데모와 마찬가지로 자신 만의 태그를 만들 수 있습니다. stackoverflow.com/q/36380449/3597276 @ pro.mean

— Michael Benjamin

이것은 훌륭한 답변입니다. 감사합니다. 이 사이, 당신이 첫 번째 예에서, 나를 깨닫게 flex하고 grid, align-items숙박 동일하지만 몇 가지 이유가 justify-content된다justify-items

— WoJ

flexbox를 사용하여 텍스트를 가운데에 맞출 수 있습니다. 그런데 텍스트는 익명의 플렉스 항목으로 간주되므로 추가 컨테이너가 필요하지 않습니다.

에서 인 flexbox 사양 :

(A)의 각각의 흐름 아이 플렉스 컨테이너는 a가됩니다 플렉스 항목 및 직접 내부에 포함되어있는 텍스트의 각 연속 실행 플렉스 용기는 익명에 싸여 플렉스 항목 . 그러나 공백 만 포함 된 익명 플렉스 항목 (예 : white-space속성의 영향을받을 수있는 문자 )은 렌더링되지 않습니다 (있는 것처럼 display:none).

따라서 그리드 항목을 플렉스 컨테이너 ( display: flex)로 만들고 세로 및 가로를 추가 align-items: center하고 justify-content: center가운데에 맞추십시오.

또한 HTML 및 CSS의 최적화를 수행했습니다.

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

스 니펫 확장

— 바딤 오 친니 코프
소스

플렉스를 사용하지 마십시오. CSS 그리드를 유지하십시오! :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

여기서 중심 작업을하고 있습니다.

div그리드 셀 내부에있는 것을 가운데 에 배치하려면 중첩 그리드를 정의해야 작동합니다. (두 가지 예제를 모두 확인하십시오.)

https://css-tricks.com/snippets/css/complete-guide-grid/

건배!

— 콘라드 알브레히트
소스

중첩 된 그리드가 궁금합니다. 내가 어떻게 추측했는지 보여 주셔서 감사합니다. 따라서 플렉스를 그리드로 피해야한다고 생각합니까? 아니면 결합해도됩니까?

— 비트 뿌리

결합하는 것은 좋지만 작업에 적합한 도구를 사용하고 있는지 확인해야합니다. 시간을 찾아서 Rachels 프리젠 테이션을보십시오. 그러면 CSS 그리드의 주제에서 많은 부분이 명확 해집니다. youtu.be/3vJE3bVoF-Q

— Konrad Albrecht

이 방법의 문제점은 그리드 항목에 테두리를 사용할 때 발생합니다.

— Andrew

로 단축 할 수 있습니다 place-self: center;.

— DevonDahon

CSS place-items shorthand 속성은 각각 align-items 및 justify-items 속성을 설정합니다. 두 번째 값을 설정하지 않으면 첫 번째 값도 사용됩니다.

.parent {
  display: grid;
  place-items: center;
}

— CloudBranch
소스

place-items현재 Edge에서 지원되지 않습니다

— Konrad Albrecht

flex를 사용해보십시오.

플 런커 데모 : https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

— 유니스 아칸소
소스

-2

이것을 원하십니까?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

스 니펫 확장

— 레나토시 케이 라
소스

좀 빠지는. 텍스트도 세로로 정렬해야합니다.

— 비트 뿌리

사용

.text{ font-family: Raleway; font-size: large; text-align: center;  -webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);	  }

— Renato siqueira

CSS 그리드를 중심으로

그리드 레이아웃의 구조와 범위

CSS 그리드를 중심으로하는 6 가지 방법

플렉스 박스

그리드 레이아웃

auto 여백

상자 정렬 속성

text-align: center

CSS 포지셔닝

`auto` 여백

`text-align: center`