CODEWITHSUNDEEP
javascriptcsstiles
user2574264
user2574264

Reputation: 141

How to make smart tiles with html/css?

I am making tiles with divs

What I have done:

<html>

<style>

.tile{
    display:inline-block;
    width: 30em;
    height: 30em;
    background-color: #000;
}

</style>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

</html>

This causes unused space after the edge of the rightmost tiles (as the boxes jumps to the next line).

What I want to do:

I thought about something like this (pseudocode):

    width: calc(100% / rounded(100% /30em) );

Example: If the window-width divided with desired box-width gives 2,7: Then I want the box-width to be 100%/3.

How can I calculate this with JavaScript and set the width? (I have never used JS before).

Upvotes: 3

Views: 7364

Answers (2)

user2574264
user2574264

Reputation: 141

Temporary solution: I replaced the inline-block with float, and applied some of the solution from this site. However, I changed stuff like @media (max-width: 800px) to @media (max-width: 50em).

This is better but not yet optimal, because I still have to add a lot of @ media for a large range of devices. There is also a potential problem with fitting content(text) to the tiles, but I guess I can somehow use calc() to proportion the font-size inside the tiles to the tiles itself.

Working example (experimental - the point is that the tile size depends on both font-size and screen-width):

<html>

<style>

body {
   margin: 0;
   padding: 0;
   color: red;
}
.tile {
   float: left;
   position: relative;
   width: 20%;
   padding-bottom: 20%;
}
.content {
   position: absolute;
   left: 0.5em;
   right: 0.5em;
   top: 0.5em;
   bottom: 0.5em;
   background-color: #000;
}

@media (max-width: 50em){
  .tile{
     width: 50%;
     padding-bottom: 50%;
  }
}

</style>

<div class=tile>
  <div class = content>
  yay
  </div>
</div>

<div class=tile>
  <div class = content>
  it
  </div>
</div>

<div class=tile>
  <div class = content>
  works!
  </div>
</div>

<div class=tile>
  <div class = content>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

</html>

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

You can use text-align: justify on those inline-block elements, as demonstrated here:

http://codepen.io/patrickkunka/pen/GECBF

Here is a blog posts that explains the technique:

http://www.barrelny.com/blog/text-align-justify-and-rwd/

and here a thread that also discusses it:

How to evenly space many inline-block elements?

Upvotes: 0

Related Questions