我有一个带有卡片的网格布局,我想修改布局以保持网格系统完好无损。喜欢图片如下
我想用网格布局进行如下更改
codenpen 可用
https://codepen.io/rishavtandon93/pen/PomjeKR
如何修改网格以将布局从图像一更改为图像二,以便显示我的卡片并且底部卡片跨越两张或所有三张卡片的行?
document.getElementsByTagName("h1")[0].style.fontSize = "6vw";
.profile-page {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'user-info settings maintenance-mode partner-info';
gap: 20px;
margin-bottom: 20px;
@include screen('xl') {
grid-template-columns: 1fr 1fr;
grid-template-areas: 'user-info settings' 'partner-info maintenance-mode' 'partner-info .';
}
@include screen('m') {
grid-template-columns: 1fr;
grid-template-areas: 'user-info' 'settings' 'partner-info' 'maintenance-mode';
}
}
.profile-page-card {
background-color: var(--color-white);
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
h4 {
margin-bottom: 20px;
font-weight: 400;
}
}
.user-info {
grid-area: user-info;
}
.maintenance-mode {
grid-area: maintenance-mode;
}
.settings {
grid-area: settings;
}
.partner-info {
grid-area: partner-info;
}
.card-header {
padding: 20px;
border-bottom: 1px solid var(--color-border);
font-size: 21px;
font-weight: 400;
h4 {
margin-bottom: 0;
}
}
.card-body {
padding: 20px;
mat-slide-toggle {
margin-left: 10px;
}
}
.card-item {
margin: 20px 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
.card-key {
color: var(--color-grey-dark);
font-size: 14px;
margin-bottom: 7px;
font-weight: 700;
}
.card-value {
font-weight: 300;
font-size: 16px;
.role-value {
color: var(--color-accent);
font-weight: 500;
svg-icon {
margin-right: 4px;
}
}
.change-email-actions,
.confirm-email-actions {
margin-left: 15px;
display: inline-block;
.btn {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
@include screen('s') {
display: block;
margin-top: 15px;
margin-left: 0;
}
}
.change-email-actions {
margin-left: 0;
}
}
svg-icon {
font-size: 15px;
margin-left: 4px;
line-height: 18px;
}
.svg-icon-check {
color: var(--color-green);
}
.svg-icon-cross {
color: var(--color-red);
}
}
.card-hint {
font-size: 12px;
color: var(--color-grey-dark);
margin-top: 10px;
}
.card-buttons {
margin-top: 30px;
.btn {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
}
.card-footer {
margin-top: 20px;
text-align: center;
}
.partner-actions {
margin-top: 15px;
text-align: center;
}
<div class="profile-page">
<div class="profile-page-card user-info">
<div class="card-header">
<h4>My Information</h4>
</div>
<div class="card-body">
<div class="card-item">
<div class="card-key">User Name:</div>
<div class="card-value">{{ userInfo?.data.username }}</div>
</div>
<div class="card-item">
<div class="card-key">Organization Name:</div>
<div class="card-value">{{ userInfo?.data.organizationName }}</div>
</div>
<div class="card-item">
<div class="card-key">Subscription End Date</div>
<div class="card-value">
</div>
</div>
<div class="card-item">
<div class="card-key">E-mail:</div>
<div class="card-value">
{{ userInfo?.data.email }}
<div class="confirm-email-actions">
<button class="btn btn--small" (click)="confirmEmail()">Confirm E-mail</button>
</div>
</div>
</div>
<div class="card-item">
<div class="card-key">Role:</div>
<div class="card-value">
<div class="role-value">
<svg-icon [key]="userInfo?.data.role.toLowerCase()"></svg-icon>
{{userInfo?.data.role}}
</div>
</div>
</div>
</div>
</div>
<div class="profile-page-card maintenance-mode" *ngIf="userInfo?.data.role.toLowerCase() === 'admin'">
<div class="card-header">
<h4>Maintenance mode</h4>
</div>
<div class="card-body">
<div>
<span>Maintenance Mode:</span>
<mat-slide-toggle [color]='toggleColor' [checked]="userInfo?.isMaintenanceModeEnabled" (change)="isMaintenanceModeChanged($event)">
</mat-slide-toggle>
</div>
<div class="card-hint">
Maintenance Mode can be used by admin to disable all actions on the Server Detail page.
</div>
</div>
</div>
<div class="profile-page-card settings">
<div class="card-header">
<h4>Settings</h4>
</div>
<div class="card-body">
<div>
<div class="card-item">
<div class="card-key">Password:</div>
<div class="card-value">
<button class="btn btn--transparent btn--medium" (click)="openChangePasswordDialog()">Change Password</button>
</div>
</div>
<div class="card-item">
<div class="card-key">E-mail:</div>
<div class="card-value">
<div class="change-email-actions">
<button class="btn btn--transparent btn--medium" [disabled]="!userInfo?.data.isEmailConfirmed" (click)="openChangeEmailDialog()">Change E-mail</button>
</div>
</div>
</div>
<div *ngIf="userInfo?.data.isEmailConfirmed">
<span>E-mail Notifications:</span>
<mat-slide-toggle [color]='toggleColor' [checked]="userInfo?.data.isEmailNotificationEnabled" (change)="isEmailNotificationChanged($event)">
</mat-slide-toggle>
</div>
<div *ngIf="userInfo?.data.isEmailConfirmed" class="card-hint">
Allows to receive Taikun notifications on e-mail.
</div>
<div class="card-item">
<div class="card-value">
<button class="btn btn--danger btn--small" (click)="openDeleteDialog(userInfo.data.username)">Delete Account</button>
</div>
</div>
</div>
</div>
</div>
<div class="profile-page-card partner-info" *appUserRoleIs="['admin', 'partner']">
<div class="card-header">
<h4>Partner</h4>
</div>
<div class="card-body">
<form class="form" [formGroup]="partnerForm" (ngSubmit)="updatePartnerInfo()">
<div class="form-field form-field--full-width p-0">
<label for="partner-name">Name</label>
<input id="partner-name" matInput placeholder="Name" formControlName="name">
</div>
<div class="form-field form-field--full-width p-0">
<label for="partner-link">Link</label>
<input id="partner-link" placeholder="Link" formControlName="link">
<mat-error *ngIf="partnerForm?.get('link')?.errors?.pattern">Should have URL format, e.g. 'https://example.com'</mat-error>
</div>
<div class="image-upload">
<label for="logo-upload" class="button-like">Choose Logo</label>
<span class="file-name">
{{ partnerFormData?.get('logo')?.name }}
</span>
<input type="file" id="logo-upload" class="hidden-input" formControlName="logo" (change)="fileChange($event.target.files)" />
</div>
<div class="form-actions">
<button class="btn btn--accent">Save</button>
</div>
</form>
</div>
</div>
</div>