Thread Starter
#0
CSS Grid ilə Responsive Dizaynın Sırları
Giriş
CSS Grid, müasir veb dizaynında responsive və flexibil dizayn yaratmaq üçün güclü bir alətdir. Bu məqalədə, CSS Grid istifadə edərək responsive dizayn yaratmağı öyrənəcəyik. Əvvəlcə CSS Grid-in əsas anlayışlarını və xüsusiyyətlərini araşdıracağıq, sonra isə bu bilikləri istifadə edərək responsive bir dizayn yaratmağı öyrənəcəyik.
CSS Grid-in Əsas Anlayışları
1. Grid Container: Grid dizaynını əhatə edən elementdir. Bu elementə
2. Grid Item: Grid container daxilində yerləşən elementlərdir.
3. Grid Line: Gridin sərhədlərini müəyyənləşdirən xəttlərdir. Sıralar və sütunlar arasında yerləşirlər.
4. Grid Track: Grid sütunları və ya sıralarıdır.
5. Grid Cell: Gridin ən kiçik vahididir. Bir sütun və bir sıra kəsişməsində yerləşir.
6. Grid Area: Bir və ya bir neçə grid hüceyrələrindən ibarət olan sahədir.
CSS Grid ilə Responsive Dizaynın Yaradılması
1. Grid Containerın Yaradılması
Bu kod parçası, grid containerın yaradılması və sütunların avtomatik olaraq dəyişdirilməsi üçün
2. Grid Itemlərin Yerləşdirilməsi
Bu kod parçası, grid itemin iki sütun əhatə etməsi üçün
3. Media Queries ilə Responsive Dizaynın Yaradılması
Bu kod parçası, ekran eninin 768 pikseldən az olduğu zaman grid sütunlarının bir sütuna çevrilməsi üçün media query istifadə edir.
Nəticə
CSS Grid ilə responsive dizayn yaratmaq, müasir veb dizaynında vacib bir bacarıqdır. Bu məqalədə, CSS Grid-in əsas anlayışlarını və xüsusiyyətlərini araşdırdıq və bu bilikləri istifadə edərək responsive bir dizayn yaratmağı öyrəndik. Bu bilikləri tətbiq edərək, siz də responsive və flexibil dizaynlar yarada biləcəksiniz.
Mənbə
Giriş
CSS Grid, müasir veb dizaynında responsive və flexibil dizayn yaratmaq üçün güclü bir alətdir. Bu məqalədə, CSS Grid istifadə edərək responsive dizayn yaratmağı öyrənəcəyik. Əvvəlcə CSS Grid-in əsas anlayışlarını və xüsusiyyətlərini araşdıracağıq, sonra isə bu bilikləri istifadə edərək responsive bir dizayn yaratmağı öyrənəcəyik.
CSS Grid-in Əsas Anlayışları
1. Grid Container: Grid dizaynını əhatə edən elementdir. Bu elementə
display: grid və ya display: inline-grid xüsusiyyətini tətbiq etməklə yaradıla bilər.2. Grid Item: Grid container daxilində yerləşən elementlərdir.
3. Grid Line: Gridin sərhədlərini müəyyənləşdirən xəttlərdir. Sıralar və sütunlar arasında yerləşirlər.
4. Grid Track: Grid sütunları və ya sıralarıdır.
grid-template-columns və grid-template-rows xüsusiyyətləri ilə müəyyənləşdirilə bilər.5. Grid Cell: Gridin ən kiçik vahididir. Bir sütun və bir sıra kəsişməsində yerləşir.
6. Grid Area: Bir və ya bir neçə grid hüceyrələrindən ibarət olan sahədir.
grid-template-areas xüsusiyyəti ilə müəyyənləşdirilə bilər.CSS Grid ilə Responsive Dizaynın Yaradılması
1. Grid Containerın Yaradılması
CODE
123456css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
Bu kod parçası, grid containerın yaradılması və sütunların avtomatik olaraq dəyişdirilməsi üçün
auto-fit və minmax funksiyalarını istifadə edir.2. Grid Itemlərin Yerləşdirilməsi
CODE
1234css
.grid-item {
grid-column: span 2;
}
Bu kod parçası, grid itemin iki sütun əhatə etməsi üçün
span xüsusiyyətini istifadə edir.3. Media Queries ilə Responsive Dizaynın Yaradılması
CODE
123456css
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Bu kod parçası, ekran eninin 768 pikseldən az olduğu zaman grid sütunlarının bir sütuna çevrilməsi üçün media query istifadə edir.
Nəticə
CSS Grid ilə responsive dizayn yaratmaq, müasir veb dizaynında vacib bir bacarıqdır. Bu məqalədə, CSS Grid-in əsas anlayışlarını və xüsusiyyətlərini araşdırdıq və bu bilikləri istifadə edərək responsive bir dizayn yaratmağı öyrəndik. Bu bilikləri tətbiq edərək, siz də responsive və flexibil dizaynlar yarada biləcəksiniz.
Mənbə