Responsive layouts

Flexbox and CSS Grid

About me

Laurel Bruggeman
Sr. Software Engineer at Keap (in Chandler)
Been a dev for 10 years
- Frontend for about 8
- Using flex/css grid for ~2.5

Who is this for?

Web developers
- Beginners
- Those wanting to learn new(ish) techniques

What should you know?

HTML/CSS Basics: elements, using html/css files
helpful: css display values: block, inline-block, inline
Syntax of a css rule set

.container {
   background: green;
   height: 20rem;
}

rule set

selector

property

value

Why?

Keeps HTML clean
Keeps CSS clean
- separation of concerns
Looks great
- easy centering!!

Flexbox

or "flex"

What is flexbox?

value for the `display` property
way of "flexibly" laying out HTML elements on a page

https://annairish.github.io/historicizing/history

Can I use it?

Yes
(I hope so)

https://www.w3schools.com/css/css3_flexbox.asp

How to use

.flex-container {
  display: flex;
}

```
flex
```
- ```
flex-grow
```
- ```
flex-shrink
```
- ```
flex-basis
```
```
flex-direction
```
```
justify-content
```
```
align-items
```
```
order
```

```
flex-wrap
```
```
flex-flow
```
```
justify-items
```
```
align-content
```

The flex properties are:

Beginner example

Webpage example

Takeaways:

```
display: flex;
```
```
flex: 1;
```
```
align-items: center;
```
- for vertical centering
```
justify-content: center;
```
- for horizontal centering
```
flex-direction: row | column
```
```
@media screen and (max-width: 1024px)
```
- media queries are the key to responsive layouts

CSS Grid

or "grid"

What is CSS Grid?

value for the `display` property
way of laying out HTML elements on a page
like flexbox, but:
- more powerful
- slightly more confusing
originated in IE 11 in 2011/2012, but with -ms- prefix
standardized in all modern browsers around 2017.

Can I use it?

Yes
(Probably)

How to use

.grid-container {
  display: grid;
}

Grid properties are:

```
grid-template-columns
```
```
grid-gap
```
```
justify-content
```
```
align-content
```
```
grid-area
```
```
grid-template-areas
```

```
grid-template-rows
```
```
grid-column-start
```
```
grid-column-end
```

Beginner example

Form example

Takeaways:

```
display: grid
```
```
grid-gap
```
- for space between grid cells
```
grid-template-columns: 1fr 2fr;
```
- for defining columns
```
justify-content: center;
```
- for horizontal centering
```
align-content: center;
```
- for vertical centering
```
grid-template-areas: 'myArea myArea'
```
```
grid-area: myArea
```

Questions?

Resources

Flex:

CSS Grid:

W3Schools: https://www.w3schools.com/css/css_grid.asp
CSS Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/

Codepens used in this presentation:

Beginning flex: https://codepen.io/lbrugg/pen/KKKKvYN
Flex webpage: https://codepen.io/lbrugg/pen/vYYYJvb
Beginning grid: https://codepen.io/lbrugg/pen/BaaawEZ
Grid form: https://codepen.io/lbrugg/pen/xxxxXNv

Made with Slides.com