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 | implicit_explicit_grids, tracks_autosized_for_content |
| 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 | subgrid, use_subgrid_template_row_cols, display_grid_on_grid_item |
| 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 |