2.1 display: grid Xüsusiyyəti
CSS Grid Layout — bu, sətir və sütunlardan istifadə edərək veb səhifələrin kompleks tərtibatını yaratmağa imkan verən güclü bir layout sistemidir. CSS Grid ilə işləyərkən əsas addım Grid Konteyner yaratmaqdır. Aşağıda display: grid xüsusiyyətindən istifadə edərək Grid Konteynerin necə yaradılacağını və onun əsas aspektlərinə necə nəzarət edəcəyimizi görəcəyik.
Grid Konteyner yaratmağın əsas konsepsiyaları
display: grid Xüsusiyyəti
display: grid xüsusiyyəti elementi Grid Konteyner kimi təyin edir. Bu, CSS Grid-in bütün imkanlarından elementlərin yerləşdirilməsi üçün istifadə etməyə imkan verən bazalı bir addımdır.
Nümunə:
.grid-container {
display: grid;
}
Grid Konteynerin əsas elementləri
display: grid xüsusiyyəti ilə Grid Konteyner təyin edildikdən sonra, bu konteynerin bütün övlad elementləri avtomatik olaraq grid-elementlər olur. Bu, onların yerləşdirilməsi və konteyner daxilində hizalanmasına nəzarət etməyə imkan verir.
Nümunə:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Konteyner Nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Kod açıqlaması:
.grid-container: elementidisplay: gridxüsusiyyəti ilə Grid Konteyner olaraq təyin edir. Eyni zamanda, konteyneri vizual olaraq müəyyənləşdirmək üçün sərhəd əlavə edir.grid-item: Grid Konteyner daxilindəki elementlər üçün fon rəngi, mətn rəngi, boşluqlar, sərhəd və mətnin mərkəzləşdirilməsi kimi əsas stilləri müəyyən edir
2.2 İç-içə olan Grid konteynerləri
CSS Grid-in üstünlüklərindən biri iç-içə olan Grid konteynerlərinin yaradılmasıdır. Bu, kompleks layout-ların yaradılmasına imkan verir, burada bir grid elementi öz övlad elementləri üçün grid konteyneri ola bilər.
Nümunə:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İç-içə olan Grid Konteynerləri</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">İçəridəki element 1</div>
<div class="nested-grid-item">İçəridəki element 2</div>
</div>
</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Kodun izahı:
-
.nested-grid-container:display: gridxassəsi vasitəsilə iç-içə olan Grid konteynerini müəyyən edir, həmçinin elementlər arasında boşluqlar (gap: 5px) və daxili boşluq (padding: 10px) əlavə edir. -
.nested-grid-item: İç-içə olan Grid konteynerinin daxilindəki elementlər üçün əsas stilləri müəyyən edir, məsələn, fon rəngi, boşluq və sərhəd.
2.3 Grid Konteynerin Davranışına Nəzarət
display: grid xüsusiyyəti əlavə xüsusiyyətlərdən istifadə etməyə imkan verir ki, bunlar Grid konteynerin davranışını idarə edir. Məsələn, grid-auto-flow xüsusiyyəti elementlərin avtomatik yerləşdirilməsini idarə edir.
Nümunə:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Konteyner auto-flow ilə</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
<div class="grid-item">Element 4</div>
<div class="grid-item">Element 5</div>
</div>
</body>
</html>
2.4 Grid konteynerində Flexbox istifadəsi
Bəzi hallarda, grid-elementlər daxilində Flexbox istifadəsi daha mürəkkəb layoutlar yaratmaq üçün faydalı ola bilər. Bu, hər iki texnologiyanın üstünlüklərini birləşdirməyə imkan verir.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid konteynerində Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex element 1</div>
<div class="flex-item">Flex element 2</div>
</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Kodun izahı:
.flex-container:display: flexxüsusiyyətindən istifadə edərək grid-elementi flex-konteyner kimi təyin edir.flex-item: Flex-konteyner daxilindəki elementlər üçün baza stilləri təyin edir, məsələn, fon rəngi, boşluqlar və elastiklik (flex: 1)
GO TO FULL VERSION