Untitled
.item1 { grid-area: header; } .item2 { grid-area: attribute; } .item3 { grid-area: drive; } .item4 { grid-area: distinction; } .item5 { grid-area: other; } .item6 { grid-area: powerspec; } .item7 { grid-area: power2; } .item8 { grid-area: footer; } .grid-container { display: grid; grid-template: 'header header header' 90px 'attribute drive distinction' 200px 'attribute drive other' 50px 'powerspec power2 other' 250px 'footer footer footer' 160px; grid-template-columns: 1fr 1fr 1.5fr; grid-gap: 5px; background-color: #0e5c9c; padding: 5px; } .grid-container>div { background-color: rgba(255, 255, 255, 0.8); text-align: center; vertical-align: middle; padding: 0px 0; font-size: 1em; } select { width: 4.5em; text-align: right; vertical-align: middle; } div.attributes { display: grid; text-align: center; vertical-align: middle; font-weight: bold; grid-template-columns: 2em 9em 2em; column-gap: 1em; }
Leave a Comment