CODEWITHSUNDEEP
cssposition
Rubytastic
Rubytastic

Reputation: 15491

arranging images with css on a grid, in a way that's easy and does not suck

I have this grid, blocks of 58x58. Theres a background image with this grid and I want to position some images on certain blocks. So I used below code:

<div style="position: relative !important; right: 0px" id="div">
   <img src="/6f89ab34.jpg">
</div>

Wich is just pain because each element is relative to its previously one.

Is there a better smarter way to approach this problem?

For example so you can say place image 1 on row1, block 2 and place image 2 on row 3, block 4?

Upvotes: 0

Views: 207

Answers (1)

DA.
DA.

Reputation: 40673

There's many ways to handle it. I'd suggest using classes. One set positions absolutely on the x axis, the other on the y axis. 

.tile {position: absolute;}

.x1 {left: 0px;}
.x2 {left: 58px;}
.x3 {left: 116px;}

.y1 {top: 0px;}
.y2 {top: 58px;}
.y3 {top: 116px;}

Then each item can be positioned with classes:

<div class="tile x1 y3">

Upvotes: 3

Related Questions