카드 격자 레이아웃

나는 예술품을 전시하고 판매하는 사이트를 세우고 있기 때문에 깨끗하고 조직적인 방식으로 각종 크기의 제품을 전시하고 싶다.

카드 만들기

이것은 예술 전시이기 때문에 그림을 주로 주목하고 싶다는 것을 알지만, 제목과 모든 내용을 포함하는'쇼핑카에 추가'단추도 포함하고 싶습니다.내가 머릿속에 요소를 구축하기 시작했을 때, 그것은 자연스레 카드 스타일을 형성했고, 이미지는 위에 있고, 나머지 정보는 아래에 쌓였다.물론 요소, 특히 이미지가 화면 크기에 맞게 자신의 크기를 조정할 수 있도록 확보하고 싶습니다.Flexbox가 그렇습니다.
우선, 용기 요소로 div를 만듭니다.이것은 카드 레이아웃의 카드 섹션입니다. 그림, 제목, 카트에 추가하기 단추가 포함되어 있습니다. 저는 여기에 .product-card 종류를 추가합니다.

    <div class="product-card" id="1">
      <img src="#" />
      <h5>"Title"</h5>
      <button class="add_to_cart">Add To Cart</button>
    </div>

이것은 최종적으로 모든 내용이 응답하기 쉽도록 flex 용기가 필요합니다. 그래서 저는 display: flex; 을 설정할 것입니다. 왜냐하면 저는 내용이 위에서 아래로(왼쪽에서 오른쪽이 아니라) 쌓이기를 원하기 때문에 flex-direction: column; 를 설정할 것입니다.다른 몇 줄의 스타일을 추가하여 우리는 우리의 기본 응답 카드를 얻었다.

.product-card {
  display: flex;
  flex-direction: column;
  margin: 5px;
  outline: 1px solid black;
}

.product-card button {
  max-width: 6.5em;
}

사용자 정의 카드

카드를 좀 더 좋게 보이기 위해서, 나는 사용자 정의 형식을 추가할 것이다.나는 제목이 더욱 뚜렷하고 그림에 중첩되기를 바란다.이 작업을 수행하기 위해 position: absolute; 을 사용하기 때문에 제품 카드 컨테이너에 position: relative; 를 추가하여 앵커 역할을 하고 카트에 추가 버튼의 맨 위에 작은 여백을 추가합니다.나는 또 화면이 너무 어렸을 때 잘리지 않고 필요할 때 내용이 줄어들기를 바란다.그림은containerdiv에 있기 때문에 그림을 설정하는 것이 쉽습니다."max-width: 100%;

.product-card h5 {
  font-size: 1.5em;
  margin: 0;
  position: absolute;
  bottom: 15%;
  opacity: 60%;
  max-width: fit-content;
}

.product-card img {
  max-width: 100%;
}

.product-card {
  ...
  position: relative;
}

.product-card button {
  ...
  margin-top: 7px;
}

레이아웃에 카드 표시

현재 나의 내용은 카드에 기반한 예쁜 디스플레이가 생겼으니 구조를 구성할 때가 되었다.다음은 내 레이아웃 요구 사항입니다.

배치는 내용행으로 구성해야 한다

이미지 왜곡 없이 필요에 따라 화면 크기를 조절해야 함

동일한 행/열의 셀 높이와 너비가 일치하고 최대 항목

에 부합해야 함

컨텐트는 셀

의 중심에 있어야 합니다.

새 컨텐츠를 작성할 때 자동으로 섹션에 균등하게 추가해야 함

내가 반드시 해야 할 첫 번째 일은 내용카드 목록을 용기div에 포장하는 것이다. 이div는 실제 레이아웃의 구조와 형식을 제공할 것이다.

<div class="products-container">

  <div class="product-card" id="1">
    <img src="#" />
    <h5>"Title"</h5>
    <button class="add_to_cart">Add To Cart</button>
  </div>

  <div>...next product card</div>
  <div>...next product card</div>
  <div>...etc</div>

</div>

FlexBox 레이아웃

일반적으로 나는 응답성 디자인을 간단하게 하기 위해 Flexbox를 계속 사용한다.내가 해야 할 일은 flex 디스플레이로 용기 요소를 만들고 사이즈 준칙과 포장 규칙을 추가하는 것이다. 내가 카드를 처리하는 것처럼, 그리고 나는 거의 완성하지 못할 것이다.

.products-container {
  width: 80%;   /* products take up 80% of page leaving room for other components */
  display: flex;
  flex-wrap: wrap;
}

불행하게도 이런 방법은 이번에 효과가 없었다.이미지의 크기가 다르기 때문에 레이아웃은 특히 요소의 포장 방식을 매우 유행하게 하기 시작한다.그것은 일을 할 수 있고 #3을 제외한 모든 요구를 만족시킬 수 있지만, 통일된 사이즈가 없다면, 내가 원하는 만큼 깨끗하고 질서정연하지 않다.

메쉬 레이아웃

그래서 나는 행/열 구조를 강화하기 위해 뭔가를 사용해야 한다.내가 줄과 열 (2차원) 을 생각했을 때, 나는 격자를 생각했다.편리하다. CSS에 격자 디스플레이가 내장되어 있기 때문에 나는 그것을 사용할 것이다.

.products-container {
  width: 80%;   /* products take up 80% of page leaving room for other components */
  display: grid;
}

다음은 재미있는 부분이다.모든 요구 사항, 특히 #2(필요에 따라 너비 변경)를 충족시키기 위해 격자를 어떻게 설정합니까?필요한 CSS 줄은 다음과 같습니다.grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));.이것은 기본적으로 "매 줄에 가능한 한 많은 등폭열을 만들고 줄을 바꾸어 반복한다"는 것이지만, 나는 이것에 대해 분해하고 해석할 것이다.

grid-template-columns: 몇 개의 열과 각각의 크기가 있어야 하는지를 정의합니다.더 간단한 용례에서 간단하게 grid-template-columns: 100px 100px 100px 100px열 3개를 포함하는 표를 만들 수 있습니다.

repeat(): 지정된 횟수를 반복하는 열 크기 조정 모드를 지정합니다.

auto-fit: 요구 사항 #5를 충족시키기 위해 하드코딩 열의 크기나 계수를 피해야 합니다. 이것은 내용과 화면의 크기에 의해 결정됩니다.자동 조정은 열의 너비 (이것은 줄에서 가장 큰 내용에 의해 결정됨) 에 따라 가능한 한 많은 열을 채워 줍니다.

minmax(200px, 1fr): 이것은 격자가 모든 내용을 한 줄에 놓으려고 하지 않도록 최소 열 크기(200px)를 설정하고, 칸을 거의 보이지 않는 위치로 압축하고, 최대 열 크기(1fr)를 설정하여'남은 사용 가능한 공간의 동등한 몫'을 나타낸다이것이 바로 우리가 지정한 너비의 방식이며, 너비는 줄에서 가장 큰 내용에 의해 결정되어야 한다.

완성된 후에 우리는 격자 레이아웃을 완성할 것입니다. 그러나 #2와 #4의 요구가 완전히 만족되지 않았다는 것을 알 수 있습니다.폭은 확실히 조정할 수 있지만, 그림을 왜곡하고 다른 카드 스타일을 어지럽힐 수 있으며, 내용이 중간에 있지 않기 때문에 공백이 많을 뿐이다.이 문제를 해결하기 위해서, 우리는 단지 justify-items: center; 를 수평 거중에 추가하고, align-items: center; 을 수직 거중에 추가하기만 하면 된다.

.products-container {
  display: grid;
  width: 80%;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  align-items: center;
}

완성!현재 우리는 화면 크기와 나타나는 특정한 내용에 대해 응답하는 깨끗하고 조직적인 UI를 가지고 있다.이것은 현실 세계에서 매우 중요하다. 내용은 통상적으로 프로그래밍 방식으로 나타나기 때문에 프로그래머가 그 차원을 모르는 상황에서 이를 레이아웃에 추가해야 한다.

다음은 실제 사이트(React 구축 사용)에서 이 두 UI 결과를 비교한 것입니다.flexbox를 다양한 크기의 이미지와 함께 사용할 때 발생하는 불안정한 효과를 더 잘 볼 수 있습니다.
우선 FlexBox 사용
그리고는 메쉬 사용하기