İsimlendirilmiş Alanlar

Coddy'nin HTML Journey'sinin CSS Hakimiyeti 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 adlar verebilirsiniz. Bu yöntem, özellikle üst bilgiler, kenar çubukları ve alt bilgiler 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ıyor ve adlandırılmış 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 metin satırı bir satır oluşturur ve satırdaki her kelime ızgaranın bir parçasıdır. Bir kelimeyi tekrarlarsanız, o alan daha fazla yer kaplayacak şekilde uzar.

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

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

Görev

Kolay

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

.container seçicisine aşağıdaki özellikleri atayın:

display değerini grid olarak ayarlayın
grid-template-columns değerini 1fr 3fr olarak ayarlayın
grid-template-rows değerini auto 1fr auto olarak ayarlayın
grid-template-areas değerini şu şekilde 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.

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>