همونطور که قول داده بودم
grid-area
این گزینه مثل یک شناسه برای عنصره که با این شناسه توی جدولمون میچینیمش
header {
grid-area: header;
}
main {
grid-area: main;
}
.boxs1 {
grid-area: boxs1;
}
.boxs1 {
grid-area: boxs2;
}
footer {
grid-area: footer;
}
خب به همین راحتی نصف راه رو رفتیم
display: grid;
این یعنی عنصرمون از گرید استفاده میکنه / این رو فقط توی عنصر مادر (که اینجا عنصر مادرمون بادی هستش) میزاریم
مشخص کردن طول و عرض جدول
body {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
این کد یعنی طول و عرض جدول
اولی ستون ها
دومی ردیف ها
grid-template-areas
و این یعنی اصل قضیه
این کد مشخص میکنه هرکدوم از اون شناسه هامون چ شکلی و کحا قرار بگیرن
قدم های بعدی: چینش نهایی و کد نهایی / استفاده از css برای تنظیم بهتر
(بخش نهایی دوره مقدماتی)
بسیار عالی صدرا جان، واقعا بدرد بخور بود. ممنون
ممنون