CSS 그리드를 중심으로

programing

CSS 그리드를 중심으로

linuxpc 2023. 8. 4. 22:43

CSS 그리드를 중심으로

CSS Grid로 간단한 페이지를 만들려고 합니다.

제가 하지 못한 것은 HTML의 텍스트를 각각의 그리드 셀에 집중시키는 것입니다.

콘텐츠를 별도로 배치해 보았습니다.div 내부 의 안팎 left_bg그리고.right_bg실렉터와 일부 CSS 속성을 가지고 놀았지만 소용이 없었습니다.

이거 어떻게 하는 거지?

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>

이 답변은 두 가지 주요 섹션으로 구성됩니다.

CSS 그리드에서 정렬이 어떻게 작동하는지 이해합니다.
CSS 그리드에 집중하기 위한 6가지 방법.

솔루션에만 관심이 있다면 첫 번째 섹션을 건너뜁니다.

그리드 배치의 구조와 범위

그리드 컨테이너에서 센터링이 어떻게 작동하는지 완전히 이해하려면 먼저 그리드 레이아웃의 구조와 범위를 이해하는 것이 중요합니다.

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

용기
그 항목
내용

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

그리드 컨테이너의 범위는 상위-하위 관계로 제한됩니다.

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

하위 항목을 초과하는 그리드 컨테이너의 하위 항목은 그리드 레이아웃의 일부가 아니므로 그리드 속성을 허용하지 않습니다.(적어도 그리드 항목의 하위 항목이 기본 컨테이너의 라인을 준수할 수 있도록 하는 기능이 구현될 때까지는 그렇지 않습니다.)

다음은 위에서 설명한 구조 및 범위 개념의 예입니다.

틱택-토-모양의 격자를 상상해 보세요.

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>

플렉스박스

그리드 항목의 내용을 중앙에 쉽고 간편하게 배치하려면 플렉스박스를 사용합니다.

보다 구체적으로 그리드 항목을 유연한 컨테이너로 만듭니다.

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

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>

그리드 항목의 내용을 중앙에 배치하려면 항목을 그리드(또는 플렉스) 컨테이너로 만들고, 익명의 항목을 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/ #http-index

`text-align: center`

그리드 항목에서 컨텐츠를 수평으로 중앙에 배치하려면 속성을 사용할 수 있습니다.

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작동하지 않습니다.

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

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>

은 고할수도있다니습라다▁that라고 말할 수 .display: inline-grid인라인 수준 컨테이너를 설정합니다. 이는 사실입니다.그럼왜안해요?'▁doesnt▁so안▁why?vertical-align그리드 항목에서 작업합니까?

그 이유는 그리드 형식 컨텍스트에서 항목이 블록 수준 요소로 처리되기 때문입니다.

6.1. 그리드 항목 표시

그display그리드 항목의 값이 차단됨: 지정된 경우display그리드 컨테이너를 생성하는 요소의 유입 하위 항목은 인라인 수준 값으로, 블록 수준 등가로 계산됩니다.

블록 형식 지정 컨텍스트에서, 무언가.vertical-align속성은 원래 용도로 설계되었지만 브라우저는 인라인 수준 컨테이너에서 블록 수준 요소를 찾을 것으로 예상하지 않습니다.잘못된 HTML입니다. 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

플렉스를 사용하려고 하지도 말고 CSS 그리드를 유지하세요.내용 요소에 다음을 추가하기만 하면 됩니다.

place-self: center;

그리고 그것은 여기에서 중심 작업을 할 것입니다.

내부의 중심을 잡고 싶다면,div즉, 그리드 셀 내부에서 작동하려면 중첩된 그리드를 정의해야 합니다.두 가지 예는 데모에 나와 있습니다.

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

CSS 배치 항목 단축 속성은 정렬 항목 및 정당성 항목 속성을 각각 설정합니다.두 번째 값이 설정되지 않은 경우 첫 번째 값도 이 값에 사용됩니다.

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

플렉스 상자를 사용하여 텍스트를 가운데에 배치할 수 있습니다.그런데 텍스트는 익명의 유연성 항목으로 간주되기 때문에 추가 컨테이너가 필요하지 않습니다.

플렉스 박스 사양:

Flex 컨테이너의 각 유입 하위 항목은 Flex 항목이 되고 Flex 컨테이너 내에 직접 포함된 각 연속 텍스트 실행은 익명의 Flex 항목으로 감싸집니다.그러나 공백(즉, 속성의 영향을 받을 수 있는 문자)만 포함된 익명 플렉스 항목은 렌더링되지 않습니다(마치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>

우리는 사용할 수 있습니다.place-items: center;자식 요소를 가운데에 텍스트로 만드는 부모 요소의 속성입니다.

.parent {
    display:grid;
    grid-template-columns: repeat(2,1fr);
    border: 3px solid yellow;
    grid-gap: 3px;
    place-items: center;
 }
 
 .parent > div {
    background-color: blue;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 2rem;
 }

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

부모를 그리드로 만들고,justify-content: center;그리고.align-content: center;

.parent {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  display: grid;
  justify-content: center;
  align-content: center;
}

.child {
  height: 20px;
  width: 20px;
  background-color: red;
}

<div class="parent">
  <div class="child">child</div>
</div>

플렉스를 사용해 보십시오.

플런커 데모: 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>

이것은 저에게 효과가 있었습니다.

.d-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid black;
  border-left: 1px solid black;
}

.d-grid div {
  height: 50px;
  display: flex;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  align-items: center;
  justify-content: center;
}

<div class="d-grid">
  <div>text 1</div>
  <div>text 2</div>
  <div>text 3</div>
  <div>text 4</div>
  <div>text 5</div>
  <div>text 6</div>
</div>

이거 먹을래요?

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>

언급URL : https://stackoverflow.com/questions/45536537/centering-in-css-grid

'programing' 카테고리의 다른 글

장고 모델 양식:save(commit=False)는 무엇에 사용됩니까? (0)	2023.08.04
Ajax - 다운로드 전 파일 크기 가져오기 (0)	2023.08.04
뒤로 버튼 클릭 시 페이지를 새로 고치는 방법은 무엇입니까? (0)	2023.08.04
Asp.net 보기 상태 MAC 유효성 검사 실패 (0)	2023.08.04
스프링 부트 DevTools가 이클립스에서 작동하지 않음 (0)	2023.08.04

현재글CSS 그리드를 중심으로

각종 프로그래밍 정보를 다루는 블로그입니다.

c, python, WordPress, MongoDB, jquery, angular, reactjs, JSON, GIT, AngularJS, ajax, Android, Oracle, MariaDB, sql-server, ASP.NET, bash, Excel, spring-boot, powershell,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

linuxpc

CSS 그리드를 중심으로

CSS 그리드를 중심으로

그리드 배치의 구조와 범위

CSS 그리드에서 센터링을 위한 6가지 방법

플렉스박스

그리드 레이아웃

`auto`

상자 선형 특성

`text-align: center`

CSS 포지셔닝

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

CSS 그리드를 중심으로

CSS 그리드를 중심으로

그리드 배치의 구조와 범위

CSS 그리드에서 센터링을 위한 6가지 방법

플렉스박스

그리드 레이아웃

auto

상자 선형 특성

text-align: center

CSS 포지셔닝

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

`auto`

`text-align: center`