Jump to content

Images side by side in a grid


Revolutsio
 Share

Go to solution Solved by maxxd,

Recommended Posts

i have a grid container with the following sizes

.container {
    display: grid;
    grid-template-columns: 200px 1200px 420px;
    gap: 10px;
}
.row {
    border: 1px solid aliceblue;
    border-radius: 5px;
    background-clip: border-box;
    position: relative;
    background-color: darkslategrey;
}

In the middle grid i want to add 4 images of 400x225 side by side. how do i do this please

Link to comment
Share on other sites

  • Solution
Posted (edited)

You'll need to build an inner div, place it in the middle, column. Set the inner div to grid and style from there.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Testing Grid</title>

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			display: flex;
			justify-content: center;
			align-content: center;
			background: teal;
		}
		.outer-container{
			background: lightcoral;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 100px 1fr 100px;
			gap: 10px;
			justify-items: center;
			align-items: center;
		}
		.inner-container{
			background: yellow;
			grid-column: 2 / 3;
			display: grid;
			grid-template-columns: repeat(2, 50%);
			grid-template-rows: auto;
			gap: 20px;
		}
		.block{
			background-color: blue;
			padding: 20px;
		}
	</style>

</head>
<body>
	<section class="outer-container">
		<div class="inner-container">
			<div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div>
			<div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div>
			<div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div>
			<div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div>
		</div>
	</section>
</body>
</html>

Pardon the eye-searing colors; I like to be able to see what I'm doing...

Your mileage may vary with the widths you're using - I'm testing on a surface tablet so the screen is smaller.

Edited by maxxd
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.