Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS grid (steps (define template (columns (explicit (definition for…

- - - - explicit
        
        definition for columns that are explicitly defined
        
        e.g. grid-template-columns: 1fr 1fr 1fr;
      - implcit
        
        definition for columns that are NOT explicitly defined
        
        applied to columns that follow after explicitly defined columns
        
        e.g. grid-auto-columns: 1fr 1fr 1fr;
    - - implicit
        
        definitions for rows that are NOT explicitly defined
        
        applied to rows that follow after explicitly defined
        
        e.g. grid-auto-rows: 1fr 1fr;
      - explicit
        
        e.g. grid-template-rows: 1fr 1fr 1fr;
        
        definition for rows that are explicitly defined
  - - - to span more columns
        
        e.g. grid-column:span 2
        
        grid-column-start
        
        grid-column-end
      - span more rows
        
        e.g. grid-rows: 3;
        
        grid-row-start
        
        grid-row-end
      - rows and columns
        
        e.g. grid-area: span 3 / span 3;
- - - - shorthand for
        
        align-items: center (Y axis ⬆)
        
        justify-items: center (X axis ➡)