CSS 그리드: 요소 쌓기

날 따라와

누적 요소

"누적 요소"란 무엇을 의미합니까!? 음, 아래 이미지에서 볼 수 있듯이 z 공간에 쌓인 요소에 대해 이 용어를 사용합니다! 원하는 대로 Photoshop 레이어처럼! 이 경우 레이어는 이미지, 그래디언트, 텍스트 순입니다.



이 기사/비디오에서는 이러한 요소를 우아하게 쌓는 방법을 보여드리고 싶습니다! 그러나 플로트나 위치 절대값을 사용하는 대신 css grid 의 힘을 사용할 것입니다.

이 html 스니펫을 살펴보겠습니다.

<div class="card stack">
    <div class="img"></div>
    <div class="gradient"></div>
    <div class="title">
        <h2>Lorem ipsum dolor sit amet.</h2>
    </div>
</div>

여기에 세 개의 (div) 자식이 있는 카드 "구성 요소"가 있습니다. 하나는 이미지를 담기 위한 것이고, 하나는 그라디언트를 위한 것이고, 다른 하나는 이미지 위에 배치되어야 하는 텍스트를 위한 것입니다.

또한 카드 요소에는 "스택"이라는 추가 클래스가 있습니다. 우리는 이 클래스를 사용하여 작은 재사용 가능한 유틸리티를 만들 것입니다.

그래서 그것에 대한 CSS를 추가하자.

.stack {
    display: grid;
}

이렇게 하면 스택 요소가 높이가 한 행이고 너비가 한 열인 실제 그리드로 바뀝니다. 여기서 중요한 개념은 이제 그리드에 "셀"이 하나만 있어도 아래 이미지와 같이 4개의 그리드 선이 있다는 것입니다.



여기에서 그리드의 왼쪽, 위쪽, 오른쪽 및 아래쪽에 대한 그리드 선이 있는 것을 볼 수 있습니다. CSSgrid-area 속성을 제공하여 이러한 그리드 선 사이에 그리드 항목을 배치할 수 있습니다.

.stack > * {
  grid-area: <left> / <top> / <right> / <bottom>;
}

"레이어"를 배치하려면 격자 항목에 격자 영역 속성을 지정하고 4개의 격자선 번호를 부여하여 격자선 사이에 배치해야 하는 격자 항목을 알려야 합니다. 위의 예는 이러한 값의 순서를 보여줍니다.

.stack > * {
  grid-area: 1 / 1 / 2 / 2;
}

위의 코드를 사용하여 모든 자식 요소에 첫 번째와 두 번째 수평 그리드 선 사이와 첫 번째와 두 번째 수직 그리드 선 사이에 배치하도록 지시합니다.

그리드의 같은 위치에 배치하기 때문에 완벽하게 서로 위에 배치됩니다.

시작 그리드 선만 제공하여 그리드 영역 값을 줄일 수 있습니다. Grid는 인접한 그리드 셀만 덮고 싶다고 가정합니다.

.stack > * {
  grid-area: 1 / 1;
}

텍스트를 맨 아래로 밀어 넣습니다.

예제 레이아웃에서 텍스트는 이미지 하단에 배치됩니다. 이 작업을 위해 그리드align-self를 사용할 수 있습니다.

.card .title {
    align-self: end;
}

여기에서 제목 div에 end 값이 있는 align-self 속성을 추가했습니다. 이 속성은 이 요소 내부의 모든 항목을 맨 아래로 밀어냅니다.

내 구독
사줘coffee
채팅하러 오세요
더 많은 기사를 보려면 나를 따르십시오.

소중한 시간 내주셔서 감사합니다. 멋진 하루 보내세요!