İsimlendirilmiş Alanlar

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 33 / 43.

Öğeleri satır numaralarını kullanarak yerleştirmek yerine, grid-template-areas özelliğini kullanarak ızgaranızın bölümlerine isimler verebilirsiniz. Bu yöntem, özellikle üst bilgiler (headers), yan çubuklar (sidebars) ve alt bilgiler (footers) gibi birden fazla bölümle çalışırken temiz ve okunabilir düzenler oluşturmak için harikadır. Aşağıdaki örneğe göz atın:

CSS Grid ile bir kapsayıcı tanımlıyoruz ve isimlendirilmiş bir düzen oluşturmak için grid-template-areas kullanıyoruz:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Her bir metin satırı bir satır oluşturur ve satırdaki her bir kelime ızgaranın bir parçasıdır. Bir kelimeyi tekrarlarsanız, o alan daha fazla alana yayılacaktır.

Ardından, HTML öğelerinizi bu isimlerle şu şekilde eşleştirirsiniz:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

Aşağıdaki resimdeki gibi alanlara sahip temel bir web sayfası için bir CSS grid düzeni oluşturun:

.container seçicisi üzerinde aşağıdaki özellikleri ayarlayın:

display değerini grid yapın
grid-template-columns değerini 1fr 3fr yapın
grid-template-rows değerini auto 1fr auto yapın
grid-template-areas değerini şuna ayarlayın:
"header header"
"profile main"
"footer footer"

Her öğeyi ilgili alanına atayın. Örneğin, .header için grid-area değerini header olarak ayarlayın.

Kopya kağıdı

Adlandırılmış ızgara düzenleri oluşturmak için grid-template-areas kullanın:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Her metin satırı bir satır oluşturur ve satırdaki her kelime ızgaranın bir parçasıdır. Bir kelimeyi tekrarlamak, o alanı daha fazla alana yayar.

grid-area kullanarak öğeleri ızgara alanlarına atayın:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Kendin dene

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.