CODEWITHSUNDEEP
htmlcss
bad_programmer
bad_programmer

Reputation: 55

How to create grid with different column width

I want to create gallery-look-like home page with 7 columns each with different width.

This is a preview of what I'm trying to create: enter image description here

Upvotes: 1

Views: 2172

Answers (4)

CHanaka
CHanaka

Reputation: 502

you can try this, this was create using bootstrap

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title></title>
</head>
<body>
<div class="col-md-12" style="color:red;height:500px">
<div class="col-md-1" style="height:100%;padding:0px;" >
	<div style="background-color:red;height:40%;margin-top:5px;;"></div>
	<div style="background-color:red;height:20%;margin-top: 5px"></div>
</div>
<div class="col-md-2" style="height:100%;padding:0px;">
	<div style="background-color:red;height:30%;margin:5px"></div>
	<div style="background-color:red;height:20%;margin: 5px"></div>
</div>
<div class="col-md-2" style="height:100%;padding:0px;">
	<div style="background-color:red;height:10%;margin:5px"></div>
	<div style="background-color:red;height:30%;margin: 5px"></div>
	<div style="background-color:red;height:10%;margin:5px"></div>
	<div style="background-color:red;height:20%;margin: 5px"></div>
</div>
<div class="col-md-1" style="background-color:red;height:100%;margin: 5px"></div>
<div class="col-md-2" style="background-color:red;height:100%;margin: 5px"></div>
<div class="col-md-2" style="background-color:red;height:100%;margin: 5px"></div>
<div class="col-md-1" style="background-color:red;height:100%;margin: 5px"></div>
</div>
</body>
</html>

check full page in snippet

Upvotes: 0

b01
b01

Reputation: 4384

You should be able to use a newer CSS and HTML only solution like Flexbox. There should be shiv's for older browser support should you need it.

Flexbox

There is also Grid, for when you want something more fixed: Grid

Upvotes: 1

Rohit Chopra
Rohit Chopra

Reputation: 567

You can create your own grid system of 7 columns. Divide the screen into 7 parts then the width of: Each column : %of 1/7 Code:

.col1{width:14.28%;}//% of 1/7
.col2{width:..%;}//% of 2/7
.col3{width:..%;}//% of 3/7
.col4{width:..%;}//% of 4/7
.col5{width:..%;}//% of 5/7
.col6{width:..%;}//% of 6/7
.col7{width:100%;}//% of 7/7

In place of .. put the percentage. This way you can create your own 7 column grid system.

You can also do this using bootstrap but it is using 12 column grid system.

Upvotes: 0

user2940296
user2940296

Reputation: 153

One way to do it is USING Bootstrap-
Check this link.
If you know how to use Bootstrap, you only have to manipulate the number of columns to adjust the whole screen.
Eg- columns each frame will fit in- 1,1,2,2,3,2,1 (But that will look very boring).

Another way is to take the width of the screen and divide it into 7 different columns by assigning a desired proportion (in percent) you want it to have on the screen. But you'll have to make sure they all sum up to 100%.
Eg- Percent of screen the width of each photo will occupy- 10, 8, 15, 12, 30, 15, 10

In your css you can apply a white border to the image and set the height you want it to have accordingly.
If I got your question wrong or missed something, let me know.

Upvotes: 0

Related Questions