/* * @Author: Kane * @Date: 2022-11-12 23:32:20 * @LastEditors: Kane * @LastEditTime: 2022-11-14 07:42:30 * @FilePath: \car_dealer\css\app.css * @Description: * * Copyright (c) ${2022} by Kane, All Rights Reserved. */ @import url("colors.css"); #root, #app { width: 100%; } body { background-color: var(--backupground-color); padding: 50px; } .content { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; width: 25rem; margin: 0px auto; border-radius: 5px; } #app { padding: 15px; display: grid; grid-template-columns: 4rem auto; /* grid-template-rows: repeat(3, 1.5rem); */ grid-auto-rows: 1.5rem; grid-gap: 0.5rem; } #app > * + * { /* margin-top: 15px; */ } .grid-left { display: inline-block; grid-column: 1/2; /* place-self: end; */ text-align: right; place-items: right center; } .grid-right { display: inline-block; grid-column: 2/3; place-items: left center; } .grid-firstname { grid-row: 1/2; } .grid-lastname { grid-row: 2/3; } .grid-sex { grid-row: 3/4; } /* .grid-left p { text-align: right; } */ .grid-right div { text-align: center; }