CSS Grid ile Kompleks Layout Tasarimi

CSS Grid ile karmasik sayfa duzenlerini kolayca olusturabilirsiniz.

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; }