CSS 그리드 및 Flexbox로 Trello 레이아웃 구축

키 테이크 아웃

튜토리얼은 CSS 그리드 및 Flexbox를 사용하여 Trello 보드의 기본 레이아웃을 구현하는 방법을 보여 주어 응답 형 CSS 전용 솔루션을 제공합니다. 레이아웃은 앱 바, 보드 바 및 카드 목록이 포함 된 섹션으로 구성됩니다. 튜토리얼은 3 × 1 그리드를 사용하여 레이아웃 구조를 구축하는 방법을 설명하며, 첫 두 행은 고정 된 높이가 고정되어 있고 세 번째 행은 사용 가능한 뷰포트 높이의 나머지에 걸쳐 있습니다. 또한 뷰포트 장치를 사용하여 컨테이너가 항상 브라우저의 뷰포트만큼 키가 크게 튜토리얼은 전체 Viewport-width Flexbox 단일 라인 행 컨테이너를 사용하여 카드 목록을 포맷하는 방법을 보여줍니다. 또한 목록이 뷰포트 너비에 맞지 않으면 화면 하단에 오버 플로우 -X 속성을 사용하여 화면 하단에 수평 스크롤 바를 표시하는 방법을 보여줍니다. 튜토리얼은 최대 높이의 제약 조건을 내부 비 순서 목록에 적용하여 목록의 높이를 관리 할 것을 제안합니다. 또한 목록을 모 컨테이너만큼 키가 크게 만드는 방법과 Overflow-y 속성을 사용하여 필요할 때만 카드 스크롤 바를 표시하는 방법을 설명합니다.

이 튜토리얼에서는 Trello 보드 화면의 기본 레이아웃 구현을 안내해 드리겠습니다 (예 : 예제 참조). 이것은 반응 형 CSS 전용 솔루션이며 레이아웃의 구조적 특징 만 개발 될 것입니다.

미리보기의 경우 여기에 최종 결과의 코드 데모가 있습니다.

그리드 레이아웃 및 Flexbox 외에도 솔루션은 Calc 및 Viewport 장치를 사용합니다. 코드를보다 읽기 쉽고 효율적으로 만들기 위해 SASS 변수도 활용할 것입니다. 폴백이 제공되지 않으므로 지원 브라우저에서 코드를 실행하십시오. 더 이상 고민하지 않고 화면 구성 요소를 하나씩 개발하겠습니다. 화면 레이아웃 Trello 보드의 화면은 앱 바, 보드 바 및 카드 목록이 포함 된 섹션으로 구성됩니다. 다음 마크 업 스켈레톤 으로이 구조를 구축하겠습니다 :
• 이 레이아웃은 CSS 그리드로 달성됩니다. 구체적으로, 3 × 1 그리드 (즉, 하나의 열 및 3 행). 첫 번째 행은 앱 바, 보드 막대의 두 번째, .lists 요소의 세 번째 행입니다. 처음 두 행은 각각 고정 높이를 가지며, 세 번째 행은 나머지 뷰 포트 높이에 걸쳐 있습니다 :
뷰포트 장치는 .ui 컨테이너가 항상 브라우저의 뷰포트만큼 키가 크게 보장합니다.
그리드 서식 컨텍스트가 컨테이너에 할당되고 위에 지정된 그리드 행 및 열이 정의됩니다. 더 정확하기 위해 고유 한 열을 선언 할 필요가 없기 때문에 행만 정의됩니다. 행의 크기는 막대 높이와 ​​FR 장치에 대한 몇 개의 SASS 변수로 이루어져 .lists 요소의 높이가 사용 가능한 뷰포트 높이의 나머지 부분에 걸쳐 있습니다. 카드는 섹션을 나열합니다 언급 한 바와 같이, 화면 그리드의 세 번째 줄은 카드 목록의 컨테이너를 호스팅합니다. 마크 업의 개요는 다음과 같습니다 나는 전체 뷰포트 윈스 플렉스 박스 단일 라인 행 컨테이너를 사용하여 목록을 형식화하고 있습니다 :
오버 플로우 -X 속성에 자동 값을 할당하면 뷰포트가 제공 한 너비에 맞지 않을 때 브라우저에 화면 하단에 수평 스크롤 바를 표시하도록 지시합니다. Flex 속성 속성은 Flex 품목에 사용되어 목록을 를 만듭니다. Flex-Basis (속기에 사용)의 자동 값은 레이아웃 엔진에 .list 요소의 너비 속성에서 크기를 읽도록 지시하고 Flex-Grow 및 Flex Shrink의 0 값은이 너비의 변경을 방지합니다. > 다음은 목록 사이에 수평 분리를 추가해야합니다. 목록의 오른쪽 마진이 설정되면 수평 오버플레이션이있는 보드의 마지막 목록 후의 여백이 렌더링되지 않습니다. 이 문제를 해결하기 위해 목록은 왼쪽 마진으로 구분되며 마지막 목록과 오른쪽 뷰포트 모서리 사이의 공간은 각 .lists 요소에 pseudo element를 추가하여 처리됩니다. 기본 Flex-Shrink : 1은 무시되어야합니다. 그렇지 않으면 의사 요소가 모든 부정적인 공간을 '흡수'하고 사라집니다. . Firefox 카드 목록 각 카드 목록은 헤더 바, 카드 시퀀스 및 바닥 글 막대로 구성됩니다. 다음 HTML 스 니펫은이 구조를 캡처합니다
여기서 중요한 작업은 목록의 높이를 관리하는 방법입니다. 헤더와 바닥 글에는 고정 높이가 있습니다 (반드시 같을 필요는 없습니다). 그런 다음 가변 수의 카드 수가 있으며 각 카드는 다양한 콘텐츠를 보유하고 있습니다. 따라서 카드가 추가되거나 제거됨에 따라 목록이 커지고 수직으로 줄어 듭니다.
그러나 높이는 무기한으로 자랄 수 없으며 .lists 요소의 높이에 따라 상한이 필요합니다. 이 한계에 도달하면 수직 스크롤 바가 목록을 넘치는 카드에 액세스 할 수 있도록 보이기를 원합니다. 이것은 최대 높이와 ​​오버플로 특성의 직업처럼 들립니다. 그러나 이러한 특성이 루트 컨테이너 .list에 적용되면 목록이 최대 높이에 도달하면 스크롤 바는 모든 .list 요소, 헤더 및 바닥 글 포함에 나타납니다. 다음 그림은 왼쪽의 잘못된 사이드 바와 오른쪽의 올바른 측면을 보여줍니다.
그래서 대신 최대 높이의 제약 조건을 내부
에 적용해 봅시다. 어떤 값을 사용해야합니까? 헤더와 바닥 글의 높이는 목록 상위 컨테이너 (.lists)의 높이에서 빼야합니다.
그러나 문제가 있습니다. 백분율 값은 .lists를 참조하지 않고
요소의 부모 인 .list를 의미 하며이 요소는 높이가 명확하지 않으므로이 백분율을 해결할 수 없습니다. .list를 .list로 키우면 다음과 같이 고정 될 수 있습니다.

이 방법으로 .list는 항상 .list만큼 높기 때문에 콘텐츠에 관계없이 배경색 속성을 목록에 사용할 수는 없지만 어린이 (헤더, 바닥 글, 카드)를 사용할 수 있습니다. 이를 위해). 목록의 하단과 뷰포트의 하단 가장자리 사이의 약간의 공간 ($ 갭)을 설명하려면 목록 높이에 대한 마지막 조정이 필요합니다.

추가 $ 스크롤 바 두께 금액은 목록이 .list 요소의 수평 스크롤 바를 만지는 것을 방지하기 위해 차감됩니다. 실제로 Chrome 에서이 스크롤 바는 .lists 상자 내부에서 '성장합니다'. 즉, 100% 값은 .lists의 높이, 스크롤 바 포함. Firefox에서 스크롤 바는 .lists 높이 밖에서 '추가'됩니다. 즉, 100%는 스크롤 바를 포함하지 않는 .list의 높이를 나타냅니다. 따라서이 뺄셈은 필요하지 않습니다. 결과적으로 스크롤 바가 보이면 Firefox에서 최대 높이에 도달 한 목록의 하단 테두리 사이의 시각적 공간과 스크롤 바의 상단이 약간 더 큽니다.

<span><span><span><div> class<span>="ui"</span>>
  <span><span><span><nav> class<span>="navbar app"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><nav> class<span>="navbar board"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><div> class<span>="lists"</span>>
    <span><span><span><div> class<span>="list"</span>>
      <span><span><span><header>></header></span>...<span><span></span>></span>
</span>      <span><span><span><ul>></ul></span>
</span>        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>        ...
        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><footer>></footer></span>...<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span>

이 구성 요소에 대한 관련 CSS 규칙은 다음과 같습니다

언급 한 바와 같이, 목록 배경색은 각 .list 요소의 어린이의 배경색 속성에 $ list-bg-color 값을 할당하여 렌더링됩니다. 오버플로 -y는 필요할 때만 카드 스크롤 바를 보여줍니다. 마지막으로, 일부 간단한 스타일링은 헤더와 바닥 글에 추가됩니다.

마무리 터치 단일 카드의 HTML은 단순히 목록 항목으로 구성됩니다.

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

또는 카드에 표지 이미지가있는 경우 :
이것은 관련 CSS : 입니다

배경, 패딩 및 하단 여백을 설정 한 후 커버 이미지 레이아웃이 준비되었습니다. 이미지 너비는 왼쪽 패딩 가장자리에서 오른쪽 패딩 가장자리까지 전체 카드에 걸쳐 있어야합니다.

그러면 음의 마진이 이미지를 수평 및 세로 정렬하도록 할당됩니다.

<span><span><span><div> class<span>="lists"</span>>
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

세 번째 양수 마진 값은 표지 이미지와 카드 텍스트 사이의 공간을 처리합니다. 마지막으로, 화면 레이아웃의 첫 번째 행을 차지하는 두 막대에 Flex 형식 컨텍스트를 추가했습니다. 그러나 그들은 스케치됩니다. 데모를 확장하여 자신의 구현을 자유롭게 구축하십시오.

결론 이것은이 디자인을 달성하는 가능한 하나의 가능한 방법 일 뿐이며 다른 접근법을 보는 것이 흥미로울 것입니다. 또한 두 화면 막대를 완성하는 등 레이아웃을 마무리하는 것이 좋을 것입니다. 또 다른 잠재적 인 향상은 카드 목록에 대한 사용자 정의 스크롤 바의 구현 일 수 있습니다. 따라서, 데모를 자유롭게 포기하고 아래 토론에 링크를 게시하십시오. . CSS 그리드 및 Flexbox를 사용하여 Trello 레이아웃 구축에 대한 자주 묻는 질문 (FAQ) CSS 그리드 및 Flexbox를 사용하여 Trello와 같은 레이아웃을 만들 수 있습니까?

CSS 그리드 및 Flexbox를 사용하여 Trello와 같은 레이아웃을 만드는 경우 여러 단계가 포함됩니다. 먼저 레이아웃을위한 기본 HTML 구조를 만들어야합니다. 여기에는 보드 용 컨테이너 및 목록 및 카드 용 컨테이너 만들기가 포함됩니다. 다음으로 CSS 그리드를 보드 컨테이너에 적용하여 그리드 레이아웃을 만듭니다. 그런 다음 Flexbox를 사용하여 각 컨테이너 내에 목록과 카드를 정렬 할 수 있습니다. 이를 통해 여러 목록과 카드를 수용 할 수있는 반응 형 융통성있는 레이아웃을 만들 수 있습니다.

Trello와 같은 레이아웃을 생성하기 위해 CSS 그리드 및 Flexbox를 사용하면 어떤 이점이 있습니까?

. CSS Grid 및 Flexbox는 Trello와 같은 레이아웃을 만드는 데 몇 가지 이점을 제공합니다. 이를 통해 다양한 화면 크기와 방향에 적응할 수있는 반응 형 레이아웃을 만들 수 있습니다. 또한 여러 목록과 카드를 수용 할 수있는 유연한 레이아웃 시스템을 제공합니다. 또한 강력한 정렬 및 분배 컨트롤을 제공하므로 깨끗하고 정리 된 레이아웃을 쉽게 만들 수 있습니다.

CSS 그리드와 Flexbox를 사용하여 다른 유형의 레이아웃을 생성 할 수 있습니까?

예, CSS. 그리드와 플렉스 박스는 다양한 레이아웃을 만드는 데 사용할 수있는 다재다능한 레이아웃 시스템입니다. 복잡하고 반응 형 레이아웃을 만들기 위해 개별적으로 또는 조합하여 사용할 수 있습니다. 간단한 2 열 레이아웃 또는 복잡한 그리드 레이아웃을 만들 든 CSS 그리드 및 Flexbox는 필요한 도구를 제공 할 수 있습니다.

CSS 그리드 및 Flexbox를 사용하여 TRELLO와 같은 레이아웃을 어떻게 반응 할 수 있습니까? CSS 그리드를 사용하여 Trello와 같은 레이아웃 반응을 유지하는 데는 미디어 쿼리를 사용하여 화면 크기를 기준으로 레이아웃을 조정하는 것이 포함됩니다. 미디어 쿼리를 사용하여 그리드 열 수를 변경하거나 목록 및 카드의 Flex 속성을 조정할 수 있습니다. 이를 통해 레이아웃이 다양한 화면 크기 및 방향에 적응하여 모든 장치에서 일관된 사용자 경험을 보장 할 수 있습니다.

내 Trello와 같은 레이아웃에 상호 작용을 추가 할 수 있습니까?

Trello와 같은 레이아웃은 JavaScript를 사용하여 달성 할 수 있습니다. JavaScript를 사용하여 카드에 드래그 앤 드롭 기능을 추가하여 사용자가 목록 간 카드를 이동할 수 있습니다. JavaScript를 사용하여 새 카드 또는 목록을 추가하는 기능과 같은 다른 대화식 기능을 추가 할 수도 있습니다. Trello와 같은 레이아웃을 생성하기 위해 CSS 그리드 및 Flexbox를 사용하는 데 제한이 있습니까?
CSS 그리드와 Flexbox는 강력한 레이아웃 시스템이지만 몇 가지 제한 사항이 있습니다. 예를 들어, 이전 브라우저에서는 완전히 지원되지 않을 수 있습니다. 또한 유연한 레이아웃 시스템을 제공하지만 모든 유형의 레이아웃에 적합하지 않을 수 있습니다. 이러한 제한 사항을 이해하고 필요한 경우 대체 솔루션을 고려하는 것이 중요합니다.

Trello와 같은 레이아웃의 모양을 사용자 정의 할 수 있습니까?

Trello와 같은 레이아웃의 모양을 사용자 정의 할 수 있습니다. CSS 사용. CSS를 사용하여 레이아웃의 색상, 글꼴 및 기타 시각적 요소를 변경할 수 있습니다. CSS를 사용하여 그림자 나 전환과 같은 효과를 추가하여 사용자 경험을 향상시킬 수 있습니다.

CSS 그리드와 Flexbox를 사용하여 사전 경험없이 Trello와 같은 레이아웃을 만들 수 있습니까?
Trello와 같은 레이아웃으로 문제를 해결할 수 있습니까?
성능을 위해 내 Trello와 같은 레이아웃을 최적화 할 수 있습니까?
성능을위한 텔로와 같은 레이아웃에는 몇 가지 전략이 포함될 수 있습니다. 여기에는 효율적인 CSS 선택기를 사용하여 CSS 및 JavaScript 최소화 및 이미지 최적화가 포함됩니다. Google Lighthouse와 같은 성능 도구를 사용하여 레이아웃을 분석하고 개선 영역을 식별 할 수 있습니다.

위 내용은 CSS 그리드 및 Flexbox로 Trello 레이아웃 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!