Design with a Grid

Question 1

Why design with a grid?

Answer 1

Ensure consistency and symmetrical design layout

It utilizes columns and gutters for symmetry

Question 2

What is the best column grid layout to use?

Answer 2

You should use a 12-grid layout to start with gutters in between. It can easily be changed to 2,3,4,6

Question 3

Explain some of the grid property and mechanics?

Answer 3

You can use the built in grid display

.grid-container{

display: grid;

grid-template-columns, 1fr 200 px ……you can use these for amounts of column width

grid-template-rows: 200 px; ….for height of the row

grid-column-gap

grid-row-gap

grid-gap

Question 4

What is flexbox?

Answer 4

Can create flexible items and automatically can height things evenly unlike hacking it with float

.flex-container{

margin-bottom: 100px;

display: flex;

flex-direction: row-reverse; reverse the items

justify-content: flex-end; — how you position them/align them on the page

}

the items you can control the width if you want