Scribd
Upload
17 views2 pages

Image Grid Layout with CSS

The document is an HTML template for an image grid layout. It includes a responsive grid design with CSS styles for the body and grid items, featuring two images with specific attributes. The layout is intended to display images in a visually appealing manner with a clean background and shadow effects.

Uploaded by

Nyoz Tok
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views2 pages

Image Grid Layout with CSS

The document is an HTML template for an image grid layout. It includes a responsive grid design with CSS styles for the body and grid items, featuring two images with specific attributes. The layout is intended to display images in a visually appealing manner with a clean background and shadow effects.

Uploaded by

Nyoz Tok
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Grid</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f5f5f5;
}

.grid-container {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
padding: 10px;
}

.grid-item {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
padding: 10px;
}

.grid-item img {
width: 100%;
height: auto;
border-radius: 5px;
}
</style>
</head>
<body>

<div class="grid-container">

<div class="grid-item"><img
src="[Link]
alt="banner 951x1280"
title="banner 951x1280"
loading="lazy"
width="951"
height="1280"
style="border: 1px solid black;"></div>

<div class="grid-item"><img
src="[Link]
alt="banner 951x1280"
title="banner 951x1280"
loading="lazy"
width="951"
height="1280"
style="border: 1px solid black;"></div>
</div>
</body>
</html>

You might also like