Layouts - C S S

Float

display: none;
- display: block; => Takes whole line
- display: inline-block; => Takes only required space but height/width can be defined
- display: inline; => Takes only required space, Can't define height/width/margin-top
float: left/right/inherit;
- Can use overflow: auto to make container block
clear: left/right/both; => Clear that side from floating

display: flex;
gap: 10px;
justify-content: center/flex-end/space-around/space-evenly/space-between;
align-items: center;
align-content: center;
flex-flow: flex-direction flex-wrap;
- flex-direction: column/row/column-reverse/row-reverse;
- flex-wrap: wrap/wrap-reverse; => Items wrap with change of screen size
Properties for Flex Items
- order: 1; => Highest order will be at last
- flex: flex-grow flex-shrink flex-basis;
  - flex-grow: 1; => Changes size according to the space available relative to other flex items
  - flex-shrink: 1;
  - flex-basis: 1; => Manage width/height
- align-self: center;

display: grid; => Makes the element into a Grid Container, All children becomes Grid Items
place-content: center; => Shortcut for the below 2, Grid item gets centered within grid container
- justify-content: center;
- align-content: center;
place-items: center; => Shortcut for the below 2, Content Grid items gets centered within grid items
- place-items: center center;
- justify-items: center/start/end;
- align-items: center;
grid-template-columns: repeat(n, 1fr);
- grid-template-columns: repeat(n, auto);
- grid-template-columns: repeat(auto-fit, minmax(n1, n2)); => Makes auto rows with minimum n1 and maximum n2 length
  - grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  - grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
- grid-template-columns: 1em 2em;
- grid-template-columns: 1em 2em auto;
- grid-template-columns: 1fr 2fr auto;
grid-template-rows: repeat(n, auto); => Repeats n times with auto width
grid-auto-flow: column; => Creates auto columns but can cause overflow
- grid-auto-rows: 1em; => Sets default height of rows
- grid-auto-columns: 25%; => Sets default width
grid-gap: grid-column-gap grid-row-gap; => Like margin between grit items
- grid-column-gap: 1em;
- grid-row-gap: 1em;

Create a matrix just like the page will look

    grid-template-area: "head head"
                        "nav main"
                        "nav foot";