Scribd
Upload
3 views

Grid

Uploaded by

takitakir64
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Grid

Uploaded by

takitakir64
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Lab Question: Mastering Grid Container Properties

Objective: Create a webpage layout using CSS Grid that applies advanced grid container
properties.

Problem Statement:

You are tasked with designing a webpage layout for a photo gallery. The layout must have the
following features:

1. Grid Structure:
o Use display: grid on the container to create a grid layout.
o Define grid template columns using fr units and a combination of explicit and
implicit sizing.
o Include grid template rows that accommodate content dynamically.
o Name specific grid lines for better reference.
2. Column and Row Pattern:
o Create a repeating pattern for columns: Two narrow columns (1fr), followed by
one wide column (2fr). Use the repeat() function to achieve this.
3. Grid Item Placement:
o Place specific grid items explicitly into designated grid cells using properties like
grid-column and grid-row.
o Use grid line names to position at least one grid item.
4. Bonus:
o Create a "featured" section that spans multiple columns and rows.

Tasks:

1. HTML Structure: Write a basic HTML structure with a container div that includes 6
child divs, each representing a gallery item (e.g., images or placeholders).
2. CSS Requirements:
o Set the container as a grid using display: grid.
o Use grid-template-columns to define a repeating pattern of two narrow
columns (1fr) followed by one wide column (2fr).
o Use grid-template-rows to define three rows, where the first two rows are auto
(dynamic height) and the last row is 150px.
o Use grid line names to define custom grid lines for rows or columns.
o Position the third item in the second column and the second row using grid line
names or explicit placement.
3. Output:
o The layout should be visually appealing, and each item must occupy the intended
cell in the grid.
o Include a "featured" item that spans across all three columns and occupies the
first row.
HTML Starter Code
<div class="gallery">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

<div class="item featured">Featured</div>

</div>

.gallery {

……..

.item {

background-color: lightblue;

text-align: center;

padding: 20px;

border: 1px solid #ddd;

.featured {

grid-column: 1 / -1; /* Spans all three columns */

grid-row: 1; /* Occupies the first row */

Deliverables:

 Submit the complete HTML and CSS files.


 Include a screenshot of the final layout in your submission.

You might also like