CSS 메쉬란 무엇입니까?

CSS 격자는 CSS의 기술로 개발자가 더욱 쉽고 일치하게 브라우저에서 응답성 웹 디자인 레이아웃을 만들 수 있도록 한다.CSS 메쉬를 사용하면 레이아웃에서 요소를 변환할 수 있습니다.

다음을 수행합니다.

좋은 사이트와 나쁜 사이트의 차이점은 사용자에게 가장 가까운 방식으로 사이트의 내용을 조직할 수 있다는 데 있다.당신의 사이트는 쉽게 따라갈 수 있는 네비게이션 시스템이어야 하며, 사용할 수 있는 웹 페이지의 레이아웃을 깨끗하게 하는 데 도움이 될 것이다.
쉽게 따라갈 수 있는 레이아웃은 사이트의 방문자들이 당신의 사이트에 있는 가치와 중요한 정보를 쉽게 방문할 수 있도록 할 것입니다.웹 페이지의 내용을 찾기 어려울 때 방문자들은 초조하고 불안해지며 웹 사이트를 떠나서 돌아올 수 없을 수도 있다.

입문

시작합시다!격자를 만들기 위해서는 우선 grid <div> 요소를 만들어야 합니다.<div> 태그는 HTML 문서를 여러 섹션으로 나누는 컨테이너로 사용됩니다.우리는 <div> 요소를 사용하여 HTML 요소를 조합하고 CSS 스타일을 여러 요소에 한 번에 적용합니다.

<div class="grid">

</div>

대단히 좋다이 <div> 요소는 우리의 웹 페이지에grid라는 지정된 부분이 있음을 나타낸다.이제 격자에 우리가 스타일에 사용할 항목을 추가할 때가 되었다.우리는 <div> 요소가 있는 작은 부분을 추가함으로써 이 점을 실현하고 그것들에게 단독 ID를 제공할 것이다.

<div class="grid">
   <div id="item-1"> 1 </div>
   <div id="item-2"> 2 </div>
   <div id="item-3"> 3 </div>
   <div id="item-4"> 4 </div>
</div>

이 점에서 우리는 그물을 구성하는 작은 용기를 가득 채운 큰 용기를 가지고 있다.CSS에서 컨테이너를 수정하여 메쉬로 변환합니다.

.grid {
    display: grid;
}

이제 우리의 격자가 어떤 모양인지 봅시다.

우리는 아직 격자에 줄이나 열을 정의하지 않았기 때문에, 요소는 함께 쌓일 것이다.격자류에 두 개의 새로운 속성을 추가함으로써 이 점을 바꾸겠습니다. grid-template-columns과grid-template-rows.

.grid {
     display: grid;
     grid-template-columns: 100px 100px;
     grid-template-rows: 50px 50px;
}

grid-template-columns 및 grid-template-rows 속성에 대한 모든 값은 우리가 원하는 열의 너비(100px)와 줄의 높이(50px)를 표시합니다.이제 격자선은 다음과 같습니다.

걸출했어속성을 추가하여 메쉬의 요소 사이에 작은 간격을 만듭니다.

.grid {
     display: grid;
     grid-template-columns: 100px 100px;
     grid-template-rows: 50px 50px;
     grid-gap: 10px;
}

grid-gap 속성을 추가하여 다음 결과를 얻었습니다.

위치 및 크기 조정

격자선과 열을 제외하고 우리는 표식열의 시작과 끝을 표시하는 격자선도 있다.

위의 그림에서 볼 수 있듯이 우리는 3열이 있지만 4개의 격자선이 있다. 그 중에서 다음과 같다.

첫 번째 열은 첫 번째 줄에서 시작하여 두 번째 줄로 끝난다

두 번째 열은 두 번째 줄에서 시작하여 세 번째 줄로 끝난다

세 번째 열은 세 번째 줄에서 시작하여 네 번째 줄로 끝난다

다차원 레이아웃을 만들기 위해서 우리가 해야 할 일은 격자 안의 모든 요소의 시작과 끝 위치를 수정하는 것이다.격자 안의 첫 번째 항목이 모든 3열을 뛰어넘도록 레이아웃을 수정합시다.
내 HTML 파일에서 클래스 이름 격자를 사용하여 일치하는 ID를 포함하는 9개의 고유한 요소를 포함하는 요소grid-gap를 만듭니다.

<div class="grid">
     <div id=“item-1”> 1 </div>
     <div id=“item-2”> 2 </div>
     <div id=“item-3”> 3 </div>
     <div id=“item-4”> 4 </div>
     <div id=“item-5”> 5 </div>
     <div id=“item-6”> 6 </div>
     <div id=“item-7”> 7 </div>
     <div id=“item-8”> 8 </div>
     <div id=“item-9”> 9 </div>
</div>

현재 HTML 파일에 모든 요소를 만들었습니다. 300px 너비의 열 3개와 300px 높이의 줄 3개를 추가하여 격자 클래스의 스타일을 설정합니다.나는 또한 격자 중의 첫 번째 요소가 3열을 뛰어넘어야 한다고 지정했다. 방법은 열이 두 개의 새로운 속성으로 시작하고 끝내야 하는 줄을 지정하는 것이다. <div>과grid-column-start.

.grid {
   display: grid;
   grid-template-columns:300px 300px 300px;
   grid-template-rows:300px 300px 300px;
   grid-gap:15px;
}

#item-1 {
   grid-column-start:1;
   grid-column-end:4;
}

위의 스타일이 우리의 격자에 어떻게 영향을 미치는지 보여 줍니다.

우리는 메쉬의 첫 번째 요소의 스타일을 모든 3열을 뛰어넘도록 설정했기 때문에, 메쉬의 모든 다른 요소는 다음 사용 가능한 열로 밀어붙입니다.
또 다른 지정 요소가 어떤 격자선을 뛰어넘어야 하는지를 지정하는 방법은 속기 grid-column-end 속성을 사용하는 것이다. 이 속성은 시작 격자선과 끝 격자선 두 가지 값을 사용한다.

#item-1 {
   grid-column: 1/4;
}

이것이 바로 CSS 메쉬의 기초입니다!우리가 토론한 속성을 사용하면 당신은 현재 당신의 사이트에 가장 적합한 다차원 레이아웃을 만들 수 있습니다.다른 예제를 살펴보겠습니다. 요소 수는 이전 예제와 같지만 CSS 스타일은 다릅니다.

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px 100px 100px;
    grid-template-rows: repeat(5, 100px);
}

#item-1 {
    grid-column:1/3;
}

#item-4 {
    grid-column:2/4;
}

#item-5 {
    grid-column:1/4;
}

#item-9 {
    grid-column:1/4;
}

위의 스타일은 다음 메쉬를 생성합니다.

이 강좌를 읽어 주셔서 감사합니다!CSS 메쉬에 대한 자세한 내용을 보려면 다음과 같은 훌륭한 리소스를 참조하십시오.

격자생물: https://www.gridcritters.com/

W3 학교: https://www.w3schools.com/css/css_grid.asp

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

예제 메쉬: https://gridbyexample.com/examples/

CSS 그리드 무료 학습: https://scrimba.com/g/gR8PTE