KEMBAR78
Css Grid Intro | PDF
Scribd
Upload
13 views2 pages

Css Grid Intro

This document is an HTML example demonstrating a CSS Grid layout. It features a responsive grid container with six items, where specific items span multiple columns and rows. The layout adjusts for smaller screens using a media query.

Uploaded by

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

Css Grid Intro

This document is an HTML example demonstrating a CSS Grid layout. It features a responsive grid container with six items, where specific items span multiple columns and rows. The layout adjusts for smaller screens using a media query.

Uploaded by

losikeeregae0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

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

h1 {
text-align: center;
color: #333;
}

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 15px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 1.2em;
border-radius: 8px;
}

.grid-item:nth-child(1) {
grid-column: span 2;
}

.grid-item:nth-child(4) {
grid-row: span 2;
}

@media (max-width: 600px) {


.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h1>CSS Grid Layout</h1>

<div class="grid-container">
<div class="grid-item">Item 1 (spans 2 columns)</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4 (spans 2 rows)</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>

</body>
</html>

You might also like