Fernando Jiménez Peña's profile

UI Dev. | Deconstructing CSS: GRID

Fernando Jiménez Peña
•
UI DEVELOPMENT
DECONSTRUCTING CSS​​​​​​​
PURE CSS
GRID
RESPONSIVE LANDING PAGES
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid


PROPERTIES FOR THE GRID CONTAINER
JUSTIFY-CONTENT + ALIGN-CONTENT
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
JUSTIFY-ITEMS + ALIGN-ITEMS
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
GRID-AUTO-FLOW
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid


PROPERTIES FOR THE GRID ITEMS
GRID-COLUMN + GRID-ROW
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
GRID-AREA
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
ORDER
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid
JUSTIFY-SELF + ALIGN-SELF
flex Flexbox grid Responsive responsive layout RESPONSIVE NAV Responsive navigation grid layout responsive grid

Thanks for watching!
UI Dev. | Deconstructing CSS: GRID
Published:
Fernando Jiménez Peña's profile

Owner

Fernando Jiménez Peña's profile
La Línea de la Concepción, Spain

UI Dev. | Deconstructing CSS: GRID

Published:

Tools

Creative Fields

Attribution, Non-commercial, No DerivativesAttribution, Non-commercial, No DerivativesAttribution, Non-commercial, No Derivatives