#bf { grid-area: bf;}
#raster { grid-area: raster; }
#jpg { grid-area: jpg; }
#gif { grid-area: gif; }
#png { grid-area: png; }
#vektor { grid-area: vektor; }
#wmf { grid-area: wmf; }
#svg { grid-area: svg; }
#namn { grid-area: namn; }

.grid {
  display: grid;
  grid-template-areas:
    'bf bf bf bf bf'
    'raster raster raster raster vektor'
    'jpg gif png wmf svg'
    'namn namn namn namn namn';
    gap: 1px;
    background-color: black;
    padding: 1px;
    margin: auto;
    width: 800px;
}
.grid > div {
    text-align: center;
    font-size: 16px;
}
.dark{
    background-color: #404040;
    font-weight: bold;
}
h1{
    color: white;
}
.light{
    background-color: lightgray;
    font-weight: bold;
}
h2{
    text-align: left;
    margin-bottom: 0;
}
.white{
    background-color: #f0f0f0;
}
h3{
    text-align: left;
}
h3 > span{
    font-weight: normal;
}
.gray{
    background-color: gray;
    font-weight: bold;
}
#big{
    font-weight: bold;
    font-size: 30px;
}
#namn > h3{
    text-align: center;
}