.topbuttons{ grid-area: 1 / 1 / span 1 / span 10; } .relatives { grid-area: 2 / 1 / span 1 / span 10; } .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-rows: auto auto auto auto; grid-gap: 10px; background-image: linear-gradient(rgb(45,87,139),rgb(143,178,221)); padding: 10px; } a.black { text-decoration: none; color: black; } a.blue { text-decoration: none; color: blue; } a.red { text-decoration: none; color: red; } .indent { padding-left: 20px; } a.redbutton, button.redbutton { background: rgb(217,195,188); color: black; padding: 0 10px; text-align: center; text-decoration: none; border-radius: 5px; display: inline-block; cursor: pointer; } a.bluebutton, button.bluebutton { background: rgb(169,188,203); padding: 0 10px; color: black; text-align: center; text-decoration: none; border-radius: 5px; display: inline-block; } a.greybutton { background: rgb(233,233,237); padding: 2px 10px; color: black; text-align: center; border-radius: 5px; text-decoration: none; display: inline-block; cursor: pointer; } .reltable { width: 100%; background-image: linear-gradient(rgb(231,235,242),rgb(196,206,224)); text-align: left; padding: 0 5px 5px 5px; font-size: 15px; } .relname { width: 35%; background: rgb(255,255,255); text-align: left; font-size: 15px; } .relation { width: 66%; background: rgb(255,255,255); text-align: left; font-size: 15px; }