CSS-ruudukko: grid

CSS

/* --- Nimetyt alueet --- */

.sivu {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;   /* suhteelliset osuudet fr-yksiköllä */
  gap: 0.5em;
  grid-template-areas:
    "otsake      otsake   otsake"
    "valikko     sisalto  sivupalkki"
    "alatunniste alatunniste alatunniste";
}

.otsake      { grid-area: otsake; }
.valikko     { grid-area: valikko; }
.sisalto     { grid-area: sisalto; }
.sivupalkki  { grid-area: sivupalkki; }
.alatunniste { grid-area: alatunniste; }

.sivu > div {
  background-color: #eef1f7;
  padding: 0.5em;
}

.sivu > .sisalto {
  background-color: #ffffff;
}

/* --- Itsestään mukautuva ruudukko --- */
/* Tee niin monta saraketta kuin mahtuu, vähimmäisleveys 8em,
   ja jaa ylijäävä tila tasan. Kavenna ikkunaa ja katso, mitä tapahtuu.
   Mediakyselyä ei tarvita lainkaan. */

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  gap: 0.5em;
}

.galleria > div {
  background-color: #e6f2eb;
  border: 1px solid #1f5c46;
  padding: 1em;
  text-align: center;
}

Itsestään mukautuva ruudukko

CSS

HTML

Javascript

Konsoli