03_grids
dz / mdn / css / 3_css_layout / 03_gridsSummary
Grids
Node Tree
- grid_frameworks
- grid_layout
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 |