mdn/css/3_css_layout/03_grids

03_grids

dz / mdn / css / 3_css_layout / 03_grids

Summary

Grids

Node Tree

Nodes

grid_layout
content Grid Layout
children 2d_layout_system (desc), as_many_columns, display_grid, fr_unit, gaps_between_tracks, grid_templte_columns, gutter, implicit_explicit_grids, line_based_placement, nesting_grids_subgrids, positioning_grid_template_areas, repeating_track_listings

gutter
content Gutter: gaps bwetween each row and column
parents grid_layout

2d_layout_system
content 2d layout system for the web
parents grid_layout

display_grid
content display: grid
parents grid_layout

grid_templte_columns
content grid-template-columns
parents grid_layout

fr_unit
content fr unit: represents one fraction of the available space in teh grid container to flexibly size grid rows and columns
children distr_avail_space_not_all
parents grid_layout

distr_avail_space_not_all
content Distributes available space, but not all space. If a track has larger item, less space to share.
parents fr_unit

gaps_between_tracks
content Gaps between tracks
children column_row_gap, length_unit_perc_not_fr
parents grid_layout

column_row_gap
content [column|row]-gap: gaps between columns and rows
children gap_shorthand
parents gaps_between_tracks

gap_shorthand
content gap: shorthand for both column-gap and row-gap
parents column_row_gap

length_unit_perc_not_fr
content length, unit, percentage, but not fr unit
parents gaps_between_tracks

repeating_track_listings
content Repeating track listings
children use_repeat_func
parents grid_layout

use_repeat_func
content Use repeat() function
parents repeating_track_listings

implicit_explicit_grids
content Implicit and explicit grids
children explicit_grid, grid_auto_rows_cols, implicit_grid
parents grid_layout

explicit_grid
content Explicit grid: created using grid-template-rows/cols
parents implicit_explicit_grids

implicit_grid
content Implicit Grid: extends defined explicit grid when content is spaced outside of that grid
children tracks_autosized_for_content
parents implicit_explicit_grids

tracks_autosized_for_content
content Tracks are auto-sized by default to contain content
children grid_auto_rows_cols
parents implicit_grid

grid_auto_rows_cols
content grid-auto-rows/columns: used to give implicit tracks size.
children minmax, minmax_ex (auto)
parents tracks_autosized_for_content, implicit_explicit_grids

minmax
content minmax() sets min/max size for track
children minmax_ex (example)
parents grid_auto_rows_cols

minmax_ex
content minmanx(100px, auto): min 100px, max will expand to accomodate more content
parents minmax, grid_auto_rows_cols

as_many_columns
content as many columns as will fit
children fit_as_many_columns_css (CSS code)
parents grid_layout

fit_as_many_columns_css
content template-columns: repeat(autofit, minmax(200px, 1fr));
parents as_many_columns

line_based_placement
content line-based placement
children auto_placement, lines_start_on_1_relate_wmode, place_items_along_lines_with
parents grid_layout

lines_start_on_1_relate_wmode
content Lines start on 1, relate to writing mode (English: left to right)
parents line_based_placement

place_items_along_lines_with
content place items along lines with grid-column-start/end and grid-row-start/end
children line_placement_shorthands
parents line_based_placement

line_placement_shorthands
content shorthands: grid-column for grid-column-start/end and grid-row for grid-row-start/end.
parents place_items_along_lines_with

auto_placement
content auto-placement: placing each item into its own cell in the grid
parents line_based_placement

positioning_grid_template_areas
content Positioning with grid-template-areas
children grid_template_areas_rules
parents grid_layout

grid_template_areas_rules
content Rules
children cant_repeat_areas, every_cell_filled, period_to_leave_empty, rectangular_only, repeat_name_to_span
parents positioning_grid_template_areas

every_cell_filled
content Every cell of grid filled
parents grid_template_areas_rules

repeat_name_to_span
content Repeat name to span across 2 or more cells
parents grid_template_areas_rules

period_to_leave_empty
content use period '.' to leave cell empty
parents grid_template_areas_rules

cant_repeat_areas
content can't repeat areas in different locations
parents grid_template_areas_rules

rectangular_only
content rectangular areas only
parents grid_template_areas_rules

nesting_grids_subgrids
content Nesting grids and subgrids
children display_grid_on_grid_item, subgrid, use_subgrid_template_row_cols
parents grid_layout

subgrid
content subgrid: grid within a grid
parents nesting_grids_subgrids

display_grid_on_grid_item
content display:grid on a grid item
parents nesting_grids_subgrids

use_subgrid_template_row_cols
content use subgrid on template-rows/columns properties
parents nesting_grids_subgrids

grid_frameworks
content Grid Frameworks