Sandbox CSS

Experimenta libremente con CSS sin objetivos ni restricciones

Preview (Desktop)800 x 600

Referencia Rapida

Flexbox Container

  • display: flex;
  • flex-direction: row | column;
  • justify-content: center;
  • align-items: center;
  • gap: 16px;

Flexbox Items

  • flex: 1;
  • flex-grow: 1;
  • flex-shrink: 0;
  • align-self: flex-end;
  • order: -1;

Grid Container

  • display: grid;
  • grid-template-columns: 1fr 1fr;
  • grid-template-rows: auto;
  • gap: 16px;
  • place-items: center;

Grid Items

  • grid-column: span 2;
  • grid-row: 1 / 3;
  • place-self: center;
  • grid-area: header;