Geek Answers Handbook

The sensitive grid of tiles is evenly distributed - is this possible with pure css?

I have a grid in which there are boxes, each box has the same size and has the same layout.

What I'm trying to do is that the fields fill the entire width of the page with an even gap between them. The idea is that if the browser window moves, the box items will be recharged.

Ive looked at various ways of doing this, including using the mesh system from bootstrap 3, as well as from HERE

Ive also studied using a JS plugin for this, like Masonry, which, although it would work, seems a bit overkill, since all tile sizes are the same.

At the moment, it almost works here: http://jsfiddle.net/3xshcn7p/

The only problem with this current approach is that if the browser window is <719px but> 481, it displays only 2 of them and leaves a lot of empty space on the right side.

The same thing happens between all fields when the screen is not large enough for the next number of boxes in the line up.

Any ideas if this is achievable cleanly with help cssor would he have to use it js?

+4
source share
6 answers

You can use a flexboxsolution approach .

justify-content: space-around used if even space around all layout elements is required.

justify-content: space-between necessary for even space between layout elements.

body {
  box-sizing: border-box;
  height: 100%;
  background: #336633;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.box {
  width: 200px;
  height: 250px;
  background: white;
  float: left;
  margin: 20px;
}
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<!--wrapper-->
Run code
+7
source

text-align: center; body, float: left; display: inline-block;.

.

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
    text-align: center;
}

.box {
    width: 200px;
    height: 250px;
    background: white;
    display: inline-block;
    margin: 20px;
}

JsFiddle.

: . CSS/JQUERY/HTML

, .

+4

Flexbox ,

Jsfiddle Demo

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
}
.wrapper {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    flex-wrap: wrap;
}
.box {
    width: 200px;
    height: 250px;
    background: white;
    margin: 20px;
}
+1

, 1. .box 200 , 2. . , -.

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
}

.box {
    height: 250px;
    background: white;
    float: left;
    /*margin: 20px;*/
    margin: 2%;
    width: 100%;
}

/* 50% - ( 2 * 2% margins ), etc */
@media (min-width: 240px) { .box { width: 46%; } }
@media (min-width: 480px) { .box { width: 29%; } }
@media (min-width: 720px) { .box { width: 21%; } }
@media (min-width: 960px) {     
    /* Now we set margin to 1%, so .box width is 20% - (2 * 1% margins) */
    .box { width: 18%; } 
    .box { margin: 1%; }
} 
@media (min-width: 1200px) { .box { width: 14.666%; } }
@media (min-width: 1440px) { .box { width: 12.285%; } }
@media (min-width: 1680px) { .box { width: 10.5%; } }
@media (min-width: 1920px) { 
    .box { width: 10.111%; }
    .box { margin: 0.5%; }
}

@media (min-width: 2160px) { .box { width: 9%; } }
/* and just go further if you want more columns */

/* media queries if you want fixed margin of 20px on each side
@media (min-width: 240px) { .box { width: calc(50% - 40px); } }
@media (min-width: 480px) { .box { width: calc(33% - 40px); } }
@media (min-width: 720px) { .box { width: calc(25% - 40px); } }
and so on
*/
+1

. width: 30%/width: 30vw;.

.box {
    width: 30vw;
    margin: 1vw;
    height: 250px;
    background: white;
    float: left;
}

http://jsfiddle.net/3xshcn7p/3/

0
source

I would use a css column. For instance:

article {
          columns: 2 200px;
       column-gap: 4em;
      column-rule: 1px dotted #ddd;
}

If the window becomes smaller, the number of columns is reduced. Here is CodePen css-tricks.com

http://codepen.io/katydecorah/pen/0cef950304c03248935b3b821e8b7cec

0
source

More articles:


All Articles