Nice Grid Layout

HTML-CSS
1

I would like my layout to be option (b) but as of now it is turning into option (a). Here is the link: https://marcusrogers23.github.io/milesPhotography/portraits.html

Is there css I can add to fix this?

image

2

B isn’t really a grid layout, you’re just putting stuff in columns. You can basically get it by just doing

.container {
  columns: 3;
}

On the container for those elements, that’s all. Generally that isn’t enough though – coumns is designed for splitting a single block of text into columns and can do weird things with images like chop them in half, or leave huge gaps.

For a more robust solution that balances things out a bit better, you will normally need some JS. It’s googleable as “masonry layout” – there is a JS library called masonry that popularised this Pinterest-like layout. It is possible in CSS only, but you’ll hit issues when trying to balance things out:

Note just be aware that this is a common thing that people want for layout so there are a lot of different approaches/solutions, but it has subtleties and complexities that cause often difficulties whichever approach you choose

3

Hello if you need this kind of positionning you can do this easily with inline-block positionning. Here is an example

<div id="container">
			<div id="first">
				<p>blablabla</p>
				</p>blablabla</p>
			</div>
		
			<div id="second">
				<p>blablablaiylkgjhkmjù,lmnkbjvhyutfiylomuvgpiBH¨%OJPm,lknjbhyvugtyièogu_pih^çojùkmlyjuhb iulkiouyhjkliouyhgfrtyuiojklhgy-uèiouytdrgfhjkioyugtfrdyuèi oiuytfrdijpoklbhdtr-è_yçuàipojgtfr</p>
				</p>blablabla</p>
			</div>
		
			<div id="third">
				<p>blablabla</p>
				</p>blablabla</p>
			</div>
		</div>

and CSS with it

#container{
		width:100vw;
		
	}
	#first,#second,#third{
		display:inline-block;
		width:30vw;
		word-wrap:break-word;
		margin:5px;
		vertical-align:text-top;
	}
	p{
		outline:1px solid green;
		width:auto;
	}