AI and CSS grid: layouts without crying

End-of-lesson check

15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-builders-ai-coding-AI-and-css-grid-teen

1. What does 'display: grid' do in CSS?

   1. Makes text bold
   2. Turns a container into a grid layout system
   3. Adds a border around an element
   4. Makes an image smaller

2. What does 'grid-template-columns: repeat(3, 1fr)' create?

   1. Three rows of equal height
   2. Three equal-width columns that fill the available space
   3. A 3x3 grid of fixed-pixel cells
   4. Three columns where the middle is twice as wide

3. What does the 'gap' property do in a grid layout?

   1. Adds a gap between the grid and the page edge
   2. Removes all spacing from the grid
   3. Adds spacing between all grid cells at once
   4. Gaps only apply to rows, not columns

4. What is 'grid-template-areas' used for?

   1. Setting the background image of the grid
   2. Naming grid regions like 'header', 'sidebar', 'main' and assigning elements to them
   3. Controlling the font size inside grid cells
   4. Making the grid invisible on mobile screens

5. What is the best way to describe a layout to AI so it can write CSS Grid?

   1. Send AI a drawing of your layout using emojis
   2. Describe it in plain English: 'header at top, left sidebar 250px, main content fills the rest'
   3. List the exact pixel values for every cell
   4. Tell AI the number of lines of CSS you want

6. What is '1fr' in CSS Grid?

   1. One fixed pixel
   2. One fraction of the available space in the grid container
   3. One font-size unit
   4. First row only

7. What was layout on the web like before CSS Grid (and what replaced it)?

   1. Developers used tables and 'float: left' hacks
   2. Developers used JavaScript to position every element manually
   3. There were no layouts possible before CSS Grid
   4. Everything was positioned using only margins

8. What makes CSS Grid 'two-dimensional'?

   1. It works in 3D space with depth
   2. It controls both rows AND columns at the same time
   3. It uses both pixels and percentages
   4. It requires two separate CSS files

9. What is the most common cause of a broken CSS Grid layout?

   1. Using too many colors
   2. Missing 'display: grid' on the container, or wrong column definitions
   3. Having too many images on the page
   4. Using a Google Font

10. How should you ask AI to help debug a broken grid layout?

    1. 'Make my grid look cool'
    2. Paste the CSS and say 'My grid should have X columns and Y rows but it's broken. Explain each line and fix the problem'
    3. 'Delete my grid and use floats instead'
    4. 'Convert my grid to a table'

11. What is a 'responsive' grid layout?

    1. A grid that responds to mouse clicks
    2. A grid that changes its column count based on screen size
    3. A grid that loads faster than non-responsive grids
    4. A grid that works only on desktop computers

12. To make a responsive grid that switches from 3 columns to 1 at 768px, you should ask AI for __.

    1. A JavaScript event listener on window resize
    2. A media query that changes grid-template-columns at 768px
    3. A different HTML file for mobile devices
    4. Three separate CSS files for different screen sizes

13. When should you choose CSS Grid over Flexbox?

    1. Always — Grid is better than Flexbox in every situation
    2. When you need to control layout in both rows AND columns simultaneously
    3. When you only need to lay items out in a single row or column
    4. Grid is outdated and should never be used

14. What does 'grid-template-areas: header header / sidebar main' describe?

    1. A header that spans two columns, with sidebar and main content below
    2. A layout with no header
    3. A sidebar that spans two rows
    4. A three-column layout with equal-width columns

15. Why is sketching your layout on paper BEFORE asking AI for CSS Grid code a good habit?

    1. AI requires a physical drawing before it can respond
    2. Sketching makes paper-based websites more accessible
    3. A visual sketch gives you a clear description to feed AI, producing more accurate results
    4. Paper layouts are automatically converted to CSS by scanners