.content-grid { display: grid; /*grid-template-columns: 16ch 50ch 1fr;*/ grid-template-columns: 25% 60% 1fr; grid-template-rows: 5em repeat(2, auto); grid-column-gap: 0px; grid-row-gap: 0px; color: white; } .title { grid-area: 1 / 1 / 2 / 3; padding-left: 5ch; } .ocs-nav { grid-area: 2 / 1 / 4 / 2; font-size: 0.005em; } .profile { grid-area: 2 / 2 / 3 / 3; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); grid-column-gap: 0px; grid-row-gap: 1.5em; padding-bottom: 1.5em; word-wrap: break-word; } .portrait { grid-area: 1 / 3 / 3 / 4; } .gallery-div { grid-area: 3 / 2 / 4 / 4; } .name { grid-area: 1 / 1 / 2 / 2; } .label { grid-area: 2 / 1 / 3 / 2; } .basics { grid-area: 3 / 1 / 4 / 2; } .story { grid-area: 4 / 1 / 5 / 2; } .desc { grid-area: 5 / 1 / 6 / 2; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, 200px); grid-column-gap: 0px; grid-row-gap: 0px; border: 2px solid #C0AAC0; } .gallery img { height: 200px; width: 200px; border-radius: 5%; } .galitem { position: relative; height: 200px; width: 200px; } .subtitle { color: white; width: 200px; position: absolute; background: rgba(0,0,0,0.7); text-align: center; overflow: hidden; bottom: 0em; }