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
Can I use it?
- Yes
- (I hope so)
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:
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
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:
- W3Schools: https://www.w3schools.com/css/css3_flexbox.asp
- CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
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
Responsive layouts
By Laurel Bruggeman
Responsive layouts
Learn how to make web pages look great on any screen size with flexbox, css grid, and media queries.
