CSS Grid ile karmaşık sayfa düzenlerini kolayca oluşturabilirsiniz.
Dashboard Layout
/* (c) CodeMareFi - codemarefi.com.tr */
.dashboard {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: 60px 1fr 50px;
min-height: 100vh;
gap: 10px;
}
.header { grid-area: header; background: #e60000; }
.sidebar { grid-area: sidebar; background: #1a1a1a; }
.main { grid-area: main; background: #111; }
.footer { grid-area: footer; background: #0a0a0a; }