Chapter 16 Intermediate 60 Questions

Practice Questions — CSS Grid - The Complete Guide

← Back to Notes
11 Easy
14 Medium
9 Hard

Topic-Specific Questions

Question 1
Easy
How many equal columns does this grid create?
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
repeat(N, size) creates N tracks of the given size.
4 equal columns
Question 2
Easy
What does this create?
.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
}
px is fixed, fr takes remaining space.
A 2-column layout with a fixed 200px sidebar and a flexible main column that fills the rest.
Question 3
Easy
Which property controls space between grid cells?
Same concept as in Flexbox.
gap (you can also use row-gap and column-gap separately)
Question 4
Easy
What does grid-column: span 3 do?
span means how many tracks to cover.
The item covers 3 columns starting from wherever it would naturally land.
Question 5
Easy
How do you make a grid item span ALL columns?
Line -1 is the last line.
grid-column: 1 / -1;
Question 6
Medium
What does this create?
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
This is the magic responsive line.
A fully responsive grid where columns are at least 200px and stretch to fill available space. It shows as many columns as fit.
Question 7
Medium
What is the difference between auto-fit and auto-fill?
Think about empty tracks when items are few.
auto-fit collapses empty tracks, letting real items stretch to fill the container. auto-fill keeps empty tracks, so items stay at their minimum size.
Question 8
Medium
What does grid-template-areas do?
It assigns names to grid regions.
It lets you name rectangular regions of the grid and visually draw your layout as a string. Children then claim a named region with grid-area.
Question 9
Medium
What is fr in CSS Grid?
fr stands for 'fraction'.
The fr unit represents a fraction of the free space in a grid container. 1fr 2fr means the second column is twice as wide as the first.
Question 10
Medium
What does this do?
.grid {
  display: grid;
  grid-template-columns: minmax(200px, 400px) 1fr;
}
minmax(min, max) clamps a column between two sizes.
The first column is flexible but never smaller than 200px and never larger than 400px. The second column takes the rest.
Question 11
Medium
How do you center a single item in a grid cell (both horizontally and vertically)?
There is a shortcut for place-items.
On the parent: place-items: center; (shorthand for justify-items: center; align-items: center;)
Question 12
Hard
What is the difference between the explicit grid and the implicit grid?
Explicit = what you defined. Implicit = what the browser creates automatically.
The explicit grid is what you define with grid-template-columns and grid-template-rows. The implicit grid is what the browser creates automatically when there are more items than defined tracks. Control implicit rows with grid-auto-rows.
Question 13
Hard
What does grid-auto-flow: dense do?
Dense packing tries to fill holes left by spanning items.
It tells the browser to back-fill empty cells with smaller items that appear later in the source order, producing a more compact layout (but items may appear out of order).
Question 14
Hard
What does grid-column: 2 / -2 do on a 5-column grid?
Negative line numbers count from the end. A 5-column grid has 6 lines.
It spans from line 2 to line 5 (second-to-last line), covering columns 2, 3, and 4.
Question 15
Hard
What happens if a grid item is set to grid-area: main but no area named 'main' is defined in grid-template-areas?
The item falls back to auto-placement.
The browser ignores the named area reference and the item gets auto-placed into the next available cell like any normal grid item.
Question 16
Easy
Which property would you use to make every row in an auto-placed grid 150px tall?
Auto-created rows have their own property.
grid-auto-rows: 150px;
Question 17
Medium
What does grid-template: auto 1fr / 200px 1fr mean?
The slash separates rows and columns.
Two rows (first sized to content, second taking remaining space) and two columns (200px sidebar plus a flexible main column).

Mixed & Application Questions

Question 1
Easy
How many rows does this grid have after adding 7 items?
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
7 items / 3 columns per row.
3 rows (2 full rows of 3 items and 1 row with 1 item)
Question 2
Easy
Which value makes a grid column take all remaining space?
Fraction unit.
1fr (or any Nfr value)
Question 3
Medium
When should you use Grid instead of Flexbox?
Think about 1D vs 2D.
Use Grid when you need to control both rows and columns at the same time (dashboards, galleries, full page layouts, magazine designs). Use Flexbox when items sit in a single row or column (navbars, button groups, form fields, vertical lists).
Question 4
Medium
Why is repeat(auto-fit, minmax(250px, 1fr)) called 'magic'?
It does what 5 media queries used to do.
It creates a fully responsive card grid with zero media queries. On a phone you get 1 column, on a tablet 2 or 3, on a desktop 4 or 5. Columns automatically resize and wrap based on available space.
Question 5
Medium
What does this CSS produce?
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
The middle is twice as wide.
3 columns where the middle column is twice as wide as the left and right columns.
Question 6
Hard
What happens with this grid?
.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px;
}
/* 5 items inside */
You defined only 1 row but there are 5 items.
The grid creates 3 rows total: the explicit 100px row plus 2 implicit rows created to hold the remaining items. Implicit rows use grid-auto-rows (default is auto, so they size to content).
Question 7
Medium
Can you nest a grid inside another grid?
Yes — and it is very common.
Yes. A grid cell can itself be display: grid (or flex). Nested grids are independent of the parent grid, which is how real dashboards combine outer page layout with inner card layouts.
Question 8
Medium
Why is named grid-template-areas considered the most readable CSS layout?
Look at the string shape.
Because the grid-template-areas string visually represents the layout. You can look at the CSS and instantly see where the header, sidebar, main, and footer sit. No other CSS layout method is that self-documenting.
Question 9
Hard
What is the difference between justify-content and justify-items in Grid?
One aligns the grid; the other aligns items inside cells.
justify-content aligns the WHOLE grid horizontally inside its container (when the grid is smaller than the container). justify-items aligns content inside each grid CELL horizontally.
Question 10
Hard
What is the result of grid-template-columns: repeat(3, minmax(0, 1fr))?
The minmax trick prevents content overflow issues.
Three equal columns that never overflow their container, even with very wide content inside.
Question 11
Easy
What does display: inline-grid do?
Like inline-block but for grid.
It makes the element a grid container that flows inline with surrounding content, rather than taking its own block-level line.
Question 12
Medium
What is logged if the grid is 400px wide?
.grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1fr;
  width: 400px;
}
The minimum is 200px, both columns share space.
The first column is 200px (hits the minimum), the second column is 200px. Total 400px.
Question 13
Easy
What does grid-template: 'header header' 'sidebar main' / 200px 1fr shorthand mean?
It combines grid-template-areas and grid-template-columns.
It sets grid-template-areas (the strings) and grid-template-columns (the part after the /) in one declaration. The row heights are inferred from content.
Question 14
Hard
Does gap affect Grid's total width calculation?
Gaps are real space between tracks.
Yes. If you have 3 columns of 200px each with a 16px gap, the total width is 3*200 + 2*16 = 632px. Gaps consume container space, so tracks get sized based on (container width - total gap).
Question 15
Medium
What is the biggest advantage of Grid over float-based layouts (used in the 2010s)?
Think about control and cleanliness.
Grid was designed for 2D layouts from the ground up. It gives direct control over rows and columns, gaps, alignment, and responsive behavior without clearfix hacks, margin calculations, or extra wrapper divs. Layouts that took 50 lines of float CSS now take 5 lines of Grid.
Question 16
Easy
How do you set different row and column gaps?
Two separate properties.
row-gap: 20px; column-gap: 8px; (or shorthand gap: 20px 8px; where the first value is row-gap)
Question 17
Hard
Why does Grid align-self let you override just one item's alignment?
Items can override parent alignment settings.
The parent's align-items (and justify-items) sets default alignment for all children. A child can override its own alignment with align-self (or justify-self) without affecting siblings.

Multiple Choice Questions

MCQ 1
How do you turn on CSS Grid?
  • A. grid: true
  • B. display: grid
  • C. layout: grid
  • D. type: grid
Answer: B
B is correct. display: grid (or display: inline-grid) turns an element into a grid container.
MCQ 2
What does 1fr mean?
  • A. 1 fixed rem
  • B. 1 fraction of available space
  • C. 1 full row
  • D. 1 frame
Answer: B
B is correct. The fr unit represents a fraction of free space in a grid container.
MCQ 3
Which property sets space between grid cells?
  • A. margin
  • B. padding
  • C. gap
  • D. spacing
Answer: C
C is correct. gap sets spacing between grid cells. You can also use row-gap and column-gap.
MCQ 4
What does repeat(3, 1fr) produce?
  • A. Three rows of 1 fraction
  • B. Three equal columns
  • C. One column repeated three times
  • D. A 3x3 grid
Answer: B
B is correct. repeat(3, 1fr) is shorthand for 1fr 1fr 1fr — three columns sharing space equally.
MCQ 5
Which unit is ONLY available in Grid (and Flexbox for flex-basis calculations)?
  • A. %
  • B. em
  • C. fr
  • D. vw
Answer: C
C is correct. fr is exclusive to CSS Grid. The other units work anywhere in CSS.
MCQ 6
What does grid-column: 1 / -1 do?
  • A. Spans the first column only
  • B. Spans from the first to the last column (full width)
  • C. Removes the item from the grid
  • D. Spans -1 column (invalid)
Answer: B
B is correct. Line -1 refers to the last line, so 1 / -1 means from the first to the last line — full width regardless of column count.
MCQ 7
What is the difference between auto-fit and auto-fill?
  • A. No difference; they are aliases
  • B. auto-fit collapses empty tracks; auto-fill keeps them
  • C. auto-fit is for rows, auto-fill is for columns
  • D. auto-fit is newer syntax for auto-fill
Answer: B
B is correct. auto-fit collapses empty tracks so real items stretch. auto-fill keeps empty ghost tracks so items stay at their minimum width.
MCQ 8
Which property lets you name regions of the grid?
  • A. grid-regions
  • B. grid-names
  • C. grid-template-areas
  • D. grid-layout
Answer: C
C is correct. grid-template-areas lets you draw layouts visually with named strings. Children then claim a region via grid-area.
MCQ 9
What does place-items: center do?
  • A. Centers the grid on the page
  • B. Sets both justify-items and align-items to center
  • C. Centers the first item only
  • D. Sets cursor position
Answer: B
B is correct. place-items is the shorthand for justify-items (horizontal) and align-items (vertical).
MCQ 10
In minmax(200px, 1fr), what is 200px?
  • A. The maximum size
  • B. The minimum size
  • C. The fixed size
  • D. The preferred size
Answer: B
B is correct. minmax(min, max) — first argument is the minimum, second is the maximum. The column will never shrink below 200px.
MCQ 11
Why does minmax(0, 1fr) prevent grid overflow?
  • A. It sets gap to zero
  • B. It overrides the default auto minimum, letting the track shrink below content size
  • C. It disables wrapping
  • D. It forces items to shrink
Answer: B
B is correct. By default, 1fr has an implicit minimum of auto, which expands to fit content. minmax(0, 1fr) forces the minimum to zero so the track can shrink as needed.
MCQ 12
Which statement is TRUE about Grid vs Flexbox?
  • A. Grid is always better than Flexbox
  • B. Flexbox is for 1D layouts, Grid is for 2D layouts, and they are often used together
  • C. Flexbox is deprecated
  • D. Grid does not support alignment
Answer: B
B is correct. Flexbox handles a single row or column; Grid handles both simultaneously. Real websites use both: Grid for page structure, Flexbox inside cells.
MCQ 13
What is the implicit grid?
  • A. A hidden grid
  • B. Extra rows or columns automatically created when items exceed the explicit grid
  • C. The default grid before you set display: grid
  • D. A grid without gaps
Answer: B
B is correct. If you define 3 columns but add 10 items, the browser auto-creates additional rows to hold them. Those auto-created tracks form the implicit grid.
MCQ 14
Which property controls the size of auto-created rows?
  • A. grid-row-height
  • B. grid-auto-rows
  • C. row-size
  • D. auto-row-height
Answer: B
B is correct. grid-auto-rows sets the size of any row created implicitly by auto-placement. Same for grid-auto-columns.
MCQ 15
What does grid-auto-flow: dense do?
  • A. Packs items tightly by back-filling empty cells, even if out of order
  • B. Makes all items the same size
  • C. Removes gaps
  • D. Forces column orientation
Answer: A
A is correct. dense tells the browser to look ahead and fill gaps left by spanning items with smaller items that appear later in the source. Use carefully — it breaks reading order.
MCQ 16
How do you create a grid item that spans 2 columns from wherever it starts?
  • A. grid-column: 2
  • B. grid-column: span 2
  • C. grid-column: 2 span
  • D. columns: 2
Answer: B
B is correct. grid-column: span 2 makes the item cover 2 columns starting from its auto-placed position.
MCQ 17
Which creates a fully responsive card grid with no media queries?
  • A. grid-template-columns: 250px 250px 250px;
  • B. grid-template-columns: repeat(3, 1fr);
  • C. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  • D. grid-template-columns: 1fr 2fr 1fr;
Answer: C
C is correct. auto-fit plus minmax creates a grid that adds or removes columns based on container width. It is the famous 'one-liner responsive grid'.
MCQ 18
What is grid-template shorthand?
  • A. Shorthand for display: grid
  • B. Shorthand that combines grid-template-rows, grid-template-columns, and grid-template-areas
  • C. Shorthand for all grid properties
  • D. A template library
Answer: B
B is correct. grid-template is a shorthand combining rows, columns, and areas into one declaration.
MCQ 19
Why is Grid sometimes called a 'container-out' layout system?
  • A. Because it uses containers
  • B. Because you define the structure on the parent and children flow into it, rather than each child controlling its own position
  • C. Because it works outside of containers
  • D. Because it replaces containers
Answer: B
B is correct. In Grid, the parent defines the layout grid, and children are placed into it. This is the opposite of float-based layouts where each child defined its own position.
MCQ 20
Can grid items overlap each other?
  • A. No, items always go in separate cells
  • B. Yes, by explicitly placing two items in the same area with z-index for stacking
  • C. Only if gap is negative
  • D. Only in inline-grid
Answer: B
B is correct. Grid items can overlap. Use grid-column and grid-row to place items in the same cell, then use z-index to control stacking. Great for hero layouts with text over images.

Coding Challenges

Challenge 1: Simple 3-Column Card Grid

Easy
Build a 3-column card grid with 6 cards. Each card should have a colored background, rounded corners, and 20px padding. Use grid-template-columns: repeat(3, 1fr) and a 16px gap. Give each card a different background color and the name of a student (Aarav, Priya, Rohan, Ishita, Vivaan, Anika).
Sample Input
None
Sample Output
A 3x2 grid of colored cards displaying student names.
Use display: grid, repeat(3, 1fr), and gap.
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; background: #f8fafc; padding: 24px; margin: 0; }
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
  .card { padding: 20px; border-radius: 12px; color: white; text-align: center; font-weight: bold; }
  .c1 { background: #a855f7; }
  .c2 { background: #06b6d4; }
  .c3 { background: #f59e0b; }
  .c4 { background: #ef4444; }
  .c5 { background: #10b981; }
  .c6 { background: #ec4899; }
</style>
</head>
<body>
<div class="grid">
  <div class="card c1">Aarav</div>
  <div class="card c2">Priya</div>
  <div class="card c3">Rohan</div>
  <div class="card c4">Ishita</div>
  <div class="card c5">Vivaan</div>
  <div class="card c6">Anika</div>
</div>
</body>
</html>

Challenge 2: Responsive Photo Gallery (The Magic Line)

Easy
Build a photo gallery with 8 items that is fully responsive without any media queries. Use the magic line repeat(auto-fit, minmax(200px, 1fr)). Each photo should be a colorful gradient with the city name inside (Mumbai, Delhi, Bangalore, Chennai, Kolkata, Hyderabad, Pune, Jaipur).
Sample Input
Resize browser window
Sample Output
Gallery automatically flows from 1 column on narrow screens to 4+ columns on wide screens.
No media queries allowed. Use auto-fit and minmax.
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; background: #0f172a; padding: 24px; margin: 0; color: white; }
  h1 { text-align: center; color: #06b6d4; }
  .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 1100px; margin: 20px auto; }
  .photo { aspect-ratio: 4/3; border-radius: 12px; display: flex; align-items: flex-end; padding: 16px; font-weight: bold; }
  .p1 { background: linear-gradient(135deg, #a855f7, #ec4899); }
  .p2 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
  .p3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
  .p4 { background: linear-gradient(135deg, #10b981, #06b6d4); }
  .p5 { background: linear-gradient(135deg, #8b5cf6, #0ea5e9); }
  .p6 { background: linear-gradient(135deg, #f43f5e, #facc15); }
  .p7 { background: linear-gradient(135deg, #14b8a6, #84cc16); }
  .p8 { background: linear-gradient(135deg, #e11d48, #7c3aed); }
</style>
</head>
<body>
<h1>Cities of India</h1>
<div class="gallery">
  <div class="photo p1">Mumbai</div>
  <div class="photo p2">Delhi</div>
  <div class="photo p3">Bangalore</div>
  <div class="photo p4">Chennai</div>
  <div class="photo p5">Kolkata</div>
  <div class="photo p6">Hyderabad</div>
  <div class="photo p7">Pune</div>
  <div class="photo p8">Jaipur</div>
</div>
</body>
</html>

Challenge 3: Page Layout with grid-template-areas

Medium
Build a full page layout with header, sidebar, main content, and footer using grid-template-areas. The header should span the top, the sidebar should be on the left, main should be on the right, and footer should span the bottom. Use real content written by Meera about her blog.
Sample Input
None
Sample Output
A page layout with clearly defined regions matching the area names.
Use grid-template-areas. Header and footer must span full width. Sidebar is 220px fixed.
<!DOCTYPE html>
<html>
<head>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Arial, sans-serif; }
  .page {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 70px 1fr 50px;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
    min-height: 100vh;
  }
  header  { grid-area: header;  background: #0f172a; color: white; padding: 20px; }
  aside   { grid-area: sidebar; background: #1e293b; color: #cbd5e1; padding: 20px; }
  main    { grid-area: main;    background: #f8fafc; padding: 24px; }
  footer  { grid-area: footer;  background: #e2e8f0; padding: 14px 20px; font-size: 13px; }
  aside a { display: block; color: #cbd5e1; padding: 8px 0; text-decoration: none; }
  aside a:hover { color: #a855f7; }
</style>
</head>
<body>
<div class="page">
  <header><h1>Meera's Blog</h1></header>
  <aside>
    <a href="#">Home</a>
    <a href="#">Articles</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </aside>
  <main>
    <h2>Welcome</h2>
    <p>Hi, I am Meera. I write about learning to code, cooking, and cricket. Explore the articles on the left to get started.</p>
  </main>
  <footer>Built with CSS Grid. No framework.</footer>
</div>
</body>
</html>

Challenge 4: Bento Grid Portfolio

Medium
Create a trendy bento-box style portfolio with 6 cards of varying sizes. Use grid-column: span N and grid-row: span N to give cards different sizes. The intro card should be the largest (2x2), with smaller feature cards around it. Name it after Ishaan.
Sample Input
None
Sample Output
An asymmetric bento-style portfolio with cards of different sizes.
Use span for varying card sizes. Set grid-auto-rows. Use gradient backgrounds.
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; background: #fafafa; padding: 24px; margin: 0; }
  .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 14px; max-width: 1100px; margin: 0 auto; }
  .bento > div { border-radius: 16px; padding: 20px; color: white; font-weight: bold; display: flex; align-items: flex-end; }
  .intro { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #7c3aed, #db2777); font-size: 22px; }
  .pic   { grid-column: span 2; background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
  .stats { background: linear-gradient(135deg, #f59e0b, #ef4444); }
  .skill { background: linear-gradient(135deg, #10b981, #06b6d4); }
  .blog  { grid-column: span 3; background: linear-gradient(135deg, #1e293b, #475569); }
  .contact { background: linear-gradient(135deg, #ec4899, #f43f5e); }
</style>
</head>
<body>
<div class="bento">
  <div class="intro">Hi, I am Ishaan. Designer and coder.</div>
  <div class="pic">Gallery</div>
  <div class="stats">42 Projects</div>
  <div class="skill">React Pro</div>
  <div class="blog">Latest: How I built a game in a weekend</div>
  <div class="contact">Contact</div>
</div>
</body>
</html>

Challenge 5: Admin Dashboard with Nested Grids

Hard
Build an admin dashboard using grid-template-areas for the page structure (sidebar, header, main, footer). Inside main, use a nested grid with repeat(auto-fit, minmax(200px, 1fr)) for a responsive stats row. Include at least 4 stat cards with different colors.
Sample Input
None
Sample Output
Dashboard with sidebar, header, a responsive stats grid inside main, and a footer.
Outer grid uses areas. Inner stats grid uses auto-fit minmax. No media queries.
<!DOCTYPE html>
<html>
<head>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Arial, sans-serif; }
  .app { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 64px 1fr 44px; grid-template-areas: "sidebar header" "sidebar main" "sidebar footer"; min-height: 100vh; }
  header { grid-area: header; background: white; border-bottom: 1px solid #e5e7eb; padding: 20px; }
  aside { grid-area: sidebar; background: #0f172a; color: #cbd5e1; padding: 24px; }
  aside h2 { color: #a855f7; margin-bottom: 20px; }
  main { grid-area: main; background: #f8fafc; padding: 24px; }
  footer { grid-area: footer; background: #e2e8f0; padding: 12px 24px; font-size: 13px; color: #475569; }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
  .stat { border-radius: 12px; padding: 20px; color: white; }
  .s1 { background: linear-gradient(135deg, #a855f7, #ec4899); }
  .s2 { background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
  .s3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
  .s4 { background: linear-gradient(135deg, #10b981, #06b6d4); }
  .stat h3 { font-size: 30px; }
</style>
</head>
<body>
<div class="app">
  <header><strong>Welcome, Kavya</strong></header>
  <aside>
    <h2>SkyAdmin</h2>
    <p>Dashboard</p><p>Students</p><p>Courses</p><p>Reports</p>
  </aside>
  <main>
    <h1>Overview</h1>
    <div class="stats">
      <div class="stat s1"><h3>1,284</h3><p>Active Students</p></div>
      <div class="stat s2"><h3>42</h3><p>Live Courses</p></div>
      <div class="stat s3"><h3>98%</h3><p>Completion</p></div>
      <div class="stat s4"><h3>4.9</h3><p>Avg Rating</p></div>
    </div>
  </main>
  <footer>Dashboard built with nested CSS Grid.</footer>
</div>
</body>
</html>

Challenge 6: Calendar Month View

Hard
Build a calendar month view with a 7-column grid (Mon-Sun) and 6 rows for weeks. Use grid for the day-of-week headers and the date cells. Highlight today with a colored background. Pre-fill with dates 1-30 for April.
Sample Input
None
Sample Output
A calendar showing April with 7 columns for days of week and a grid of dates.
Use grid-template-columns: repeat(7, 1fr). Use JavaScript to generate the cells.
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; background: #0f172a; color: white; padding: 24px; margin: 0; }
  h1 { text-align: center; color: #06b6d4; }
  .calendar { max-width: 560px; margin: 0 auto; background: #1e293b; padding: 16px; border-radius: 14px; }
  .days, .dates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .days div { text-align: center; padding: 8px; font-weight: bold; color: #a855f7; font-size: 13px; }
  .dates div { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #0f172a; border-radius: 6px; font-size: 14px; }
  .today { background: linear-gradient(135deg, #a855f7, #ec4899) !important; font-weight: bold; }
  .empty { background: transparent !important; }
</style>
</head>
<body>
<h1>April 2026</h1>
<div class="calendar">
  <div class="days"><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div></div>
  <div class="dates" id="dates"></div>
</div>
<script>
  const dates = document.getElementById('dates');
  // April 2026: 1st falls on a Wednesday, 30 days
  const startOffset = 2; // Mon=0, Tue=1, Wed=2
  for (let i = 0; i < startOffset; i++) {
    const e = document.createElement('div'); e.className = 'empty'; dates.appendChild(e);
  }
  for (let d = 1; d <= 30; d++) {
    const c = document.createElement('div');
    c.textContent = d;
    if (d === 11) c.classList.add('today');
    dates.appendChild(c);
  }
</script>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass