Section 10 - Grid

Question 1

What is the CSS Grid system?

Answer 1

a 2D layout system

Question 2

Flexbox is a great tool to align content in what way?

Answer 2

Helps align content along a 1D line (horizontal or vertical)

———>

Question 3

Grid is a great tool to align content for what layouts?

Answer 3

Great for 2D layouts where you have a table structure with columns and rows

Question 4

What does 2D mean?

Answer 4

That there is an X and a Y axis

Question 5

If there’s an X and a Y axis, in most cases you’re better off using what?

Answer 5

(2D) Grid

Question 6

You should only use either Flexbox or Grid. T or F?

Answer 6

False, most developers use both tools alongside others (floats, bootstraps, frameworks to create a design)

Question 7

Within a Grid you can have a container laid out using Flexbox (3 horizontal divs within a Grid container). T or F?

Answer 7

True

(This is really common)

Question 8

Having multiple divs in a Flexbox column (inside a grid container) is a really good way of setting the ______

Answer 8

alignment for each of the items

Web page: Weather
Grid Container: Degrees
Flexbox column: Weather Summary, Town, City, Feels Like, Postal Code

Question 9

In terms of lining up items and gaps, which layout tends to match up with each other?

Answer 9

Grid

(Flexbox is hard to get the items to line up)

Question 10

How do you create a Grid? (4 steps)

Answer 10

1. Create a “parent” div container with a class (with elements inside, like paragraphs) in index.html
2. Target the parent container class in styles.css, add display: grid
3. Add grid-template-columns and grid-template-rows 1fr 2fr;
4. Add a gap if needed for between columns and rows

Question 11

With divs, for them to show up from invisible you need to set what 2 things?

Answer 11

1. Background color
2. Height/Width

Question 12

How many “fr” do you add to your grid-template-columns and rows line?

Answer 12

Depending on how many columns (or rows) you need. One “fr” for every column.

(stands for fraction)

Question 13

What’s the default layout of the HTML flow?

Answer 13

The new item sits below the last item to create a column

Question 14

All divs are set as display: block so they’re going to do what?

Answer 14

they’re going to try to occupy the full width of the screen by default

Question 15

When a container tries to take up the full width of the screen, it can create ____

Answer 15

gaps between items

Question 16

How do you fix a container that is trying to take up the full width of the screen? (default behavior for a div is display: block)

Answer 16

Set the width to a specific px to squish the items together

Question 17

What’s the default behavior for a grid container?

Answer 17

The default behavior for a grid container is to try and take up the full width, but only have as much height as it allows to fit the content

(so we don’t have to worry about/change the height)

Question 18

Default Flexbox behavior tries to do what with the content?

Answer 18

Tries to adapt and squish the content so that everything gets placed on the screen

Question 19

Default Grid behavior tries to do what with the content?

Answer 19

Creates a grid and lines everything up with each other on a column and row basis (gaps match up)

Question 20

How do you get rid of gaps between columns in a Grid layout?

Answer 20

Set a parent container width to squish all the columns together (since it’s trying to take up the full width of the web page)