Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
Grid & Layouts interview questions for placements and exams.
Questions
14
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
CSS Grid is a two-dimensional layout module allowing control of both rows and columns simultaneously. It simplifies building complex responsive designs without floats or positioning hacks.
.container { display: grid; grid-template-columns: 1fr 1fr; }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.
When no explicit row/column placement is defined, the browser automatically places items in available cells following document order. This is called auto-placement.
.grid { display: grid; grid-template-columns: 1fr 1fr; }The `fr` (fraction) unit distributes remaining space among grid tracks proportionally. For example, `1fr 2fr` divides free space in 1:2 ratio.
.grid { grid-template-columns: 1fr 2fr; }When an element is set as a grid container, all its **direct children** become grid items that can be positioned within rows and columns defined by grid properties.
.grid { display: grid; }`repeat(3, 1fr)` defines three equal flexible columns, each taking one fraction of available space. It’s a concise way to create evenly distributed columns.
.grid { grid-template-columns: repeat(3, 1fr); }`gap` (formerly grid-gap) defines the spacing between rows and columns inside the grid, without affecting the content of grid items.
.grid { gap: 20px; }Grid lines are numbered starting from 1 at the top-left corner horizontally and vertically. You can place items using these line numbers.
.item { grid-column: 1 / 3; }`minmax(200px, 1fr)` sets each column to be at least 200 pixels wide but flexible up to available free space. Combined with `auto-fit`, it creates fully responsive grids that adapt to viewport width.
.grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }Flexbox is one-dimensional, controlling layout along a single axis (row or column). CSS Grid is two-dimensional, handling both rows and columns simultaneously. Flexbox is great for aligning items within a component, while Grid is better for entire page or section layouts.
.container { display: grid; grid-template-columns: 1fr 2fr; }An explicit grid is defined by properties like `grid-template-rows` and `grid-template-columns`. Any item outside this defined structure goes into the implicit grid, automatically created by the browser to hold overflow items. You can control their sizing using `grid-auto-rows` or `grid-auto-columns`.
.grid { grid-template-columns: 200px 1fr; grid-auto-rows: 100px; }Use flexible units like `fr`, `minmax()`, and auto-placement helpers like `repeat(auto-fit, minmax(200px, 1fr))`. Combine them with media queries for breakpoints. This way the grid adapts automatically to screen sizes without fixed pixel values.
@media (max-width:600px){ .grid { grid-template-columns:1fr; } }You can define a 3-column grid using `grid-template-columns: repeat(3, 1fr)` and then use a media query to switch to `1fr` below a breakpoint. This approach creates responsive columns without extra markup or frameworks.
.grid { grid-template-columns: repeat(3,1fr); } @media(max-width:768px){ .grid{ grid-template-columns:1fr; } }Grid areas let you assign names to specific sections of a grid for easy placement. You define them in `grid-template-areas` and assign to items via `grid-area`. This makes large layouts more readable and maintainable.
.grid { grid-template-areas: 'header header' 'sidebar main'; } .header { grid-area: header; }The `grid-auto-flow` property controls how auto-placed items are inserted into the grid — row by row (`row` default) or column by column (`column`). Setting it to `dense` can fill holes left by larger items, improving packing but possibly reordering elements visually.
.grid { grid-auto-flow: row dense; }