Masonry-Layout/style.css at master · danon321/Masonry-Layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body {
  height: 100vh; }

.container {
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto; }

.masonry {
  margin: 0 auto;
  columns: 6;
  gap: 15px; }
  @media only screen and (max-width: 1515px) {
    .masonry {
      columns: 5; } }
  @media only screen and (max-width: 1265px) {
    .masonry {
      columns: 4; } }
  @media only screen and (max-width: 1015px) {
    .masonry {
      columns: 3; } }
  @media only screen and (max-width: 765px) {
    .masonry {
      columns: 2; } }
  @media only screen and (max-width: 515px) {
    .masonry {
      columns: 1; } }
  .masonry > * {
    break-inside: avoid;
    margin-bottom: 15px; }
  @supports (grid-template-rows: masonry) {
    .masonry {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
      grid-template-rows: masonry;
      grid-auto-flow: dense;
      /* align-tracks: stretch; */ } }
  .masonry__item {
    width: 235px;
    height: 350px; }
  .masonry__img {
    height: 100%;
    width: 100%;
    border-radius: 10%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover; }

/*# sourceMappingURL=style.css.map */