CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Yar
Yar

Reputation: 7457

Make a vertical responsive grid

I’m using bootstrap which as you know is based on a 12 grids horizontally, but what if you want fit these boxes in height alongside of width (fit the boxes in length automatically, for instance with some percentage for each div length, like width).

I’ve tried some Jquery based script like Manson, but it is not responsive (something like this).

Upvotes: 0

Views: 1055

Answers (2)

hugo der hungrige
hugo der hungrige

Reputation: 12912

I suggest, that you check out different horizontal oriented grids and how they use min-width and different row and comlumn-classes.You should be able to use min-height and max-height instead of min-width and max-width and height instead of width.

It depends on what you want to achieve, what the best approach for such a grid would be.

Upvotes: 1

andershagbard
andershagbard

Reputation: 1137

If you cant to achieve your exact example then it's quite simple:
You just make 4 boxes which all have position absolute, you give them width and height 50%.

Next up is to position the element in each corner. To do that, you give each box a unique id.
They could be #topLeft, #topRight, #bottomLeft, #bottomRight.
And then you just add css to those classes like this:

#topLeft {
top: 0;
left: 0;
}
#topRight {
top: 0;
right: 0;
}

Upvotes: 1

Related Questions