Programing

그리드 / 타일 뷰를 만드는 방법?

crosscheck 2020. 7. 13. 20:35
반응형

그리드 / 타일 뷰를 만드는 방법?

예를 들어 클래스 .article이 있고이 클래스를 격자보기로보고 싶습니다. 그래서 나는이 스타일을 적용했습니다 :

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

이 스타일은 .article을 타일 / 그리드처럼 보이게합니다. 고정 된 높이로 잘 작동합니다. 그러나 높이를 자동으로 설정하려면 (그 안의 데이터에 따라 자동으로 늘림) 그리드가 불쾌하게 보입니다.

여기에 이미지 설명을 입력하십시오

그리고 나는 이것을 다음과 같이 만들고 싶다 :

여기에 이미지 설명을 입력하십시오

이러한 유형의 레이아웃을 Masonry layout 이라고 합니다 . 벽돌은 또 다른 격자 레이아웃이지만 요소의 높이 차이로 인한 공백을 채울 것입니다.

jQuery Masonry 는 벽돌 레이아웃을 생성하는 jQuery 플러그인 중 하나입니다.

또는 CSS3을 사용할 수 있습니다 column. 그러나 현재 CSS3 열과의 호환성 문제가 있기 때문에 jQuery 기반 플러그인이 최선의 선택입니다.

flexbox를 사용할 수 있습니다.

  1. 여러 줄로 된 열 플렉스 컨테이너에 요소 배치

    #flex-container {
  display: flex;
  flex-flow: column wrap;
}

  2. DOM 순서가 수직이 아닌 수평으로 유지되도록 요소를 재정렬하십시오. 예를 들어 3 개의 열을 원하면

    #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

  3. 각 열의 첫 번째 항목 앞에 열 나누기를 강제하십시오.

    #flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

    안타깝게도 모든 브라우저가 flexbox에서 줄 바꿈을 지원하지는 않습니다. 그러나 Firefox에서는 작동합니다.

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

/* The following is optional */
#flex-container > div {
  background: #666;
  color: #fff;
  margin: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }
<div id="flex-container">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div>
</div>

CSS3는 주요 브라우저를 통해 광범위하게 사용 가능하고 호환되므로 SO의 스 니펫 도구가 장착 된 순수한 솔루션을 사용해야합니다.

만들기 위해 벽돌을 CSS3의 사용 레이아웃 column-count과 함께이 column-gap충분합니다. 그러나 나는 또한 media-queries그것을 반응 적으로 만들었습니다.

구현에 뛰어 들기 전에 레거시 브라우저, 특히 IE8-와 호환되는 코드를 만들기 위해 jQuery Masonry 라이브러리 폴백을 추가하는 것이 훨씬 안전하다는 것을 고려하십시오.

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

여기 우리는 간다 :

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

CSS만으로 해결하는 가장 좋은 옵션은 CSS 열 개수 속성을 사용하는 것입니다.

 .content-box {
   border: 10px solid #000000;
   column-count: 3;
 }

자세한 내용은 https://developer.mozilla.org/en/docs/Web/CSS/column-count를 참조하십시오.

디스플레이를 사용할 수 있습니다 : 그리드

예를 들면 다음과 같습니다.

열이 7 개인 그리드이며 행의 크기는 자동입니다.

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

자세한 내용은 다음 링크를 참조 하십시오 : https://css-tricks.com/snippets/css/complete-guide-grid/

으로 CSS 그리드 모듈 당신은 만들 수 있습니다 매우 유사한 레이아웃을.

CodePen 데모

1) 고정 너비 그리드 열 세 개 설정

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2) 높이가 넓은 품목이 2 줄인지 확인하십시오.

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}


body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 85vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 1rem;
  overflow: auto;
  counter-reset: item;
}
li {
  position: relative;
}
li:after {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  padding: 0.3rem;
  background: salmon;
  color: white;
  left:0;
  top:0;
}
img {
  outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}
<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

코드 펜 데모

문제 :

  • 아이템 사이의 간격이 일정하지 않습니다
  • 2 개 이상의 행에 걸쳐 큰 / 높은 항목을 수동으로 설정해야합니다
  • 제한된 브라우저 지원 :)

그리고 벽돌보다 더 나아가고 싶다면 isotope http://isotope.metafizzy.co/를 사용 하십시오. 동일한 저자가 개발 한 벽돌의 고급 버전입니다. 순수한 CSS가 아니며 Javascript의 도움을 사용합니다 하지만 매우 인기가 많으므로 많은 문서를 찾을 수 있습니다.

매우 복잡하다고 생각되면 이미 동위 원소 기반 개발을 기반으로 한 많은 프리미엄 플러그인이 있습니다 (예 : 미디어 박스 http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

그리드 기반 예제 가 하나 있습니다 .

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}
<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

이 코드 펜 을 기반으로 Rachel Andrew FTW

참고 URL : https://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view

반응형

'Programing' 카테고리의 다른 글

HTTP 응답 헤더에서 컨텐츠 처리 사용  (0) 2020.07.13
const-reference로 std :: function을 전달해야합니까?  (0) 2020.07.13
componentWillReceiveProps와 달리 라이프 사이클 메소드 getDerivedStateFromProps를 사용하는 방법  (0) 2020.07.13
데이터 테이블과 데이터 셋  (0) 2020.07.13
Python / SciPy를위한 피크 찾기 알고리즘  (0) 2020.07.13

'Programing'의 다른글

  • 현재글그리드 / 타일 뷰를 만드는 방법?

관련글

댓글

티스토리툴바