CSS 그리드 - 웹 페이지 스타일을 지정하는 더 나은 방법

CSS Grid는 웹 페이지를 작성하고 디자인하는 현대적인 방법 중 하나입니다. CSS Grid는 Flexbox가 할 수 없는 일을 할 수 있습니다. 이 게시물에서는 몇 가지 기본 사항과 고급 CSS 그리드 팁 및 요령을 배워 숙지할 수 있습니다. 시작하겠습니다! 😍😍😍

div/section/main/또는 다른 블록 수준 요소를 디스플레이 그리드로 만드는 것은 ROWS 및 COLUMNS로 지정해야 하므로 작동하지 않습니다. 이와 같이:

div {
  display: grid;
  grid-tamplate-columuns: 500px 500px 400px;

}

grid-tamplate-columuns: 500px 500px 400px; 이 행은 해당 div 요소를 크기가 500px, 500px 및 400px인 3개의 개별 열로 제동합니다. 그리드에 단위를 쓰는 더 좋은 방법은 fr 입니다.
같은 크기의 3 열을 원하면 그냥 쓰십시오.grid-tamplate-columuns: 1fr 1fr 1fr; 또는 간단히 반복 기능을 사용할 수 있습니다grid-tamplate-columuns: repeat(3,1fr);.
또는 행을 만들려면 grid-tamplate-rows를 사용할 수 있습니다.
동적 행이나 열을 만들려면 다음을 사용할 수 있습니다.grid-auto-rows/grid-auto-columns 다음에 해당 행/열의 크기가 표시됩니다. 참 쉽죠?😃😃

이제 그리드를 만들고 일부 행 또는 열을 만들었습니다. 이제 행 또는 열 사이에 약간의 간격이나 공간을 제공해야 합니다. 얼마를주고 싶은지 그게 다야 ....

이제 그리드 안에 항목을 배치하고 싶을 수 있습니다. 예를 들어 p 태그를 이동하거나 align-items/justify-items를 사용할 수 있습니다.
align-items 또는 justify-items가 부모 요소에서만 작동한다는 것은 그리드를 만든 태그를 의미한다는 것을 항상 기억하십시오.
해당 요소에 태그를 지정하여 하위 요소의 위치를 ​​변경하려면 align-self/justify-self를 사용해야 합니다.
약식은 grid-gap 또는 gap 가 될 수 있습니다.

다른 일반적인 용어는 각 행 또는 열의 위치 지정과 관련된 grid-column-start, grid-column-end, grid-row-start, grid-row-end입니다.
특정 그리드 선을 참조하여 그리드 내에서 그리드 항목의 위치를 ​​결정합니다. grid-column-start/grid-row-start는 항목이 시작되는 줄이고 grid-column-end/grid-row-end는 항목이 끝나는 줄입니다.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

구문은 각각 그리드 열 또는 그리드 행으로 축소될 수 있습니다.

CSS 그리드가 우리에게 제공하는 많은 속성이 있지만 그 중 일부가 필요합니다. 그 중 가장 중요한 속성입니다.

감사합니다🌺🌺

MDN Css 그리드 페이지 또는 CSS 트릭에서 CSS 그리드에 대해 자세히 알아볼 수 있습니다. com 페이지 그들은 멋진 리소스입니다.