Week 5

Question 1

What is the primary original use of the float property in CSS?

Answer 1

Wrapping text around images or similar inline elements.

Question 2

What happens when an element is floated?

Answer 2

It is removed from the normal document flow.

Question 3

How can you prevent content from wrapping around a floated element?

Answer 3

Use clear: left, right, or both.

Question 4

Is float recommended for layout today?

Answer 4

No, it’s outdated for layout; use Flexbox or Grid instead.

Question 5

What type of layout is Flexbox best suited for?

Answer 5

One-dimensional layouts (row OR column).

Question 6

How do you enable Flexbox on a container?

Answer 6

display: flex

Question 7

What property controls the direction of Flexbox items?

Answer 7

flex-direction

Question 8

What does justify-content control?

Answer 8

Main axis alignment (left, center, space-between, etc.)

Question 9

What does align-items control?

Answer 9

Cross axis alignment (top, center, stretch, etc.)

Question 10

What type of layout is CSS Grid best suited for?

Answer 10

Two-dimensional layouts (rows and columns).

Question 11

How do you enable CSS Grid?

Answer 11

display: grid

Question 12

How do you define column sizes in a grid?

Answer 12

With grid-template-columns, e.g. 1fr 2fr

Question 13

How do you place a grid item in a specific cell?

Answer 13

Use grid-row and grid-column.

Question 14

What is a fixed layout?

Answer 14

A layout with a set pixel width that doesn’t adapt to screen size.

Question 15

What is a fluid layout?

Answer 15

A layout that uses percentages and stretches/shrinks with screen size

Question 16

What is an elastic layout?

Answer 16

A layout that uses relative units like em or rem and scales with font size.

Question 17

What is a responsive layout?

Answer 17

A layout that adapts to any screen using relative units and media queries.

Question 18

What is an adaptive layout?

Answer 18

A layout that switches between predefined fixed layouts at breakpoints.

Question 19

What is the purpose of responsive design?

Answer 19

To ensure websites work well on all screen sizes.

Question 20

What meta tag is essential for responsive design?

Answer 20

<meta></meta>

Question 21

How do you write a media query for max width 768px?

Answer 21

@media (max-width: 768px) { … }

Question 22

What are common screen size breakpoints for media queries?

Answer 22

Mobile: ≤ 480px

Tablet: 481–768px

Desktop: 769–1200px+

Question 23

How do you neatly space elements in a footer using Flexbox?

Answer 23

Use display: flex on the footer container with justify-content: space-between to spread items evenly—perfect for placing contact info on one side and links/copyright on the other.

Question 24

How can you create a responsive navigation bar with Flexbox?

Answer 24

Use flex-direction: row for desktops and switch to column with media queries for mobile devices. This stacks menu items vertically on smaller screens.

Question 25

How does Flexbox ensure consistent product card layouts?

Answer 25

Combine flex-direction: column, justify-content: space-between, flex-wrap, and flex-grow to evenly distribute content (image, text, button) while keeping the button at the bottom, regardless of text length.

Question 26

How do you design a responsive testimonial section?

Answer 26

Use flex-wrap for responsiveness, align-items: center for balanced text/image alignment, and border-radius for circular images to create a polished, professional look.

Question 27

How can Flexbox center a custom shape like a diamond?

Answer 27

Apply justify-content and align-items: center to center the shape both vertically and horizontally, and use clip-path to create the diamond effect.

Question 28

What’s the key takeaway from these Flexbox examples?

Answer 28

Flexbox gives you powerful control over alignment, spacing, and responsiveness—perfect for everything from structural layout to creative designs.

Question 29

What is CSS Grid and how is it different from Flexbox?

Answer 29

CSS Grid is a two-dimensional layout system that uses rows and columns, while Flexbox handles only one dimension (row or column). Grid offers full control for complex page structures.

Question 30

How do you turn a container into a grid?

Answer 30

.grid-container { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto; gap: 10px; }

Question 31

How do you position an item using CSS Grid?

Answer 31

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

Question 32

Why is CSS Grid useful for responsive layouts?

Answer 32

It allows dynamic resizing of rows and columns using units like fr, auto, and media queries—making layouts clean, scalable, and better maintained than float/position methods.

Question 33

How do you create a simple gallery layout using Grid?

Answer 33

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

Question 34

How can you build a news website layout using CSS Grid?

Answer 34

Columns: Main content (3fr) and sidebar (1fr) Rows: Header, content, footer Header/Footer span both columns using grid-column: 1 / -1 Keeps content organized while resizing smoothly.

Question 35

How does a responsive card layout work using Grid?

Answer 35

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } @media (max-width: 600px) { .grid-container { grid-template-columns: 1fr; } }

Question 36

What key properties does CSS Grid use for item alignment?

Answer 36

justify-items / align-items: Align items within their grid cells justify-content / align-content: Control the whole grid’s position inside its container place-items / place-content: Shorthand for combining horizontal and vertical alignment

Question 37

What is the purpose of grid-template-areas?

Answer 37

It defines named layout areas for clearer and more manageable grid designs.

Question 38

Why use box-sizing: border-box and overflow: hidden with floating grids?

Answer 38

box-sizing: border-box prevents width overflow by including padding and borders in the width calculations. overflow: hidden clears floats, ensuring the parent container wraps around child elements properly.

Question 39

What’s the benefit of manually placing items using grid-column and grid-row?

Answer 39

Precise control over item placement without relying on margins or floats—streamlining complex layouts.

Question 40

What are some advanced CSS Grid container utilities?

Answer 40

gap, row-gap, column-gap: Control spacing grid-auto-flow: Controls how grid items are automatically positioned grid-auto-columns / grid-auto-rows: Define default sizes for implicit tracks

Question 41

What are the key takeaways from both Flexbox and CSS Grid?

Answer 41

Flexbox is ideal for alignment and 1D layouts with creative and practical uses. CSS Grid simplifies complex 2D layouts with explicit control of both rows and columns. Both methods enhance responsiveness and clean code, replacing older float-based techniques.