سلام به همه دوستان عزیز، من صادق جعفری هستم و امروز با آخرین قسمت از سری آموزش‌های جامع CSS در خدمتتون هستیم. در این بخش نهایی، می‌خواهیم به دو موضوع بسیار مهم و کاربردی بپردازیم: ریسپانسیو کردن در CSS و CSS Grid. این دو مبحث به شما کمک می‌کنن تا وب‌سایت‌هایی طراحی کنید که در تمام دستگاه‌ها و اندازه‌های صفحه نمایش به خوبی کار کنن و ظاهر زیبایی داشته باشن.
هدف این قسمت اینه که شما رو با تکنیک‌ها و ابزارهای لازم برای ساخت وب‌سایت‌های ریسپانسیو و استفاده از CSS Grid آشنا کنیم. با یادگیری این موارد، می‌تونید وب‌سایت‌هایی بسازید که هم کاربرپسند باشن و هم از نظر طراحی مدرن و جذاب به نظر برسن. آماده‌اید تا این آخرین قدم رو هم با هم برداریم و به دنیای طراحی حرفه‌ای وب وارد بشیم؟ پس با من همراه باشید!
Responsive کردن در CSS
طراحی وب واکنش‌گرا یا Responsive Design یک رویکرد در طراحی وب است که باعث می‌شود وب‌سایت‌ها و صفحات وب بر روی انواع دستگاه‌ها و اندازه‌های مختلف صفحه نمایش به خوبی نمایش داده شوند. این رویکرد به کاربران این امکان را می‌دهد تا تجربه کاربری مناسبی در تمام دستگاه‌ها، از تلفن‌های همراه گرفته تا مانیتورهای بزرگ، داشته باشند. در این مقاله، به توضیح جامع و جذاب از روش‌های مختلف برای ایجاد طراحی وب واکنش‌گرا در CSS خواهیم پرداخت و در هر قسمت، کدهای مربوطه با شرح مثال بیان خواهد شد.
1. Media Queries
Media Queries به شما این امکان را می‌دهد که استایل‌های خاصی را برای اندازه‌های مختلف صفحه نمایش تعریف کنید. این ابزار یکی از مهم‌ترین روش‌ها برای ایجاد طراحی وب واکنش‌گرا است.
/* General style */
body {
font-size: 16px;
}
/* Style for screens smaller than 600px */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Style for screens larger than 600px */
@media (min-width: 600px) {
body {
font-size: 18px;
}
}
2. Flexible Grid Layouts
استفاده از گریدهای انعطاف‌پذیر یک روش کارآمد برای طراحی صفحات واکنش‌گرا است. با استفاده از واحدهای اندازه‌گیری نسبی مانند درصدها می‌توانید چیدمان‌های انعطاف‌پذیر ایجاد کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
در این مثال، گرید به طور خودکار اندازه ستون‌ها را بر اساس اندازه صفحه نمایش تنظیم می‌کند.
3. Flexible Images
تصاویر انعطاف‌پذیر از جمله اصول اساسی طراحی واکنش‌گرا هستند. با استفاده از CSS، می‌توانیم تصاویر را به گونه‌ای تنظیم کنیم که در اندازه‌های مختلف صفحه نمایش به درستی نمایش داده شوند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image">
</body>
</html>
در این مثال، تصویر به طور خودکار اندازه‌اش را متناسب با اندازه کانتینر خود تنظیم می‌کند.
4. Responsive Typography
تنظیم اندازه فونت به صورت واکنش‌گرا می‌تواند تجربه کاربری بهتری را فراهم کند. با استفاده از واحدهای نسبی مانند em و rem می‌توانیم تایپوگرافی واکنش‌گرا ایجاد کنیم.
/* General style */
body {
font-size: 16px;
}
/* Style for screens smaller than 600px */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Style for screens larger than 600px */
@media (min-width: 600px) {
body {
font-size: 18px;
}
}
5. Flexbox Layouts
استفاده از Flexbox یکی از روش‌های موثر برای ایجاد چیدمان‌های انعطاف‌پذیر و واکنش‌گرا است. Flexbox به شما این امکان را می‌دهد که آیتم‌های داخل یک کانتینر را به راحتی مرتب کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px;
margin: 10px;
background-color: lightcoral;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
6. Viewport Units
واحدهای vw و vh برای تنظیم اندازه‌ها بر اساس درصدی از عرض و ارتفاع پنجره نمایش استفاده می‌شوند. این واحدها به شما امکان می‌دهند که عناصر را به صورت پویا و متناسب با اندازه پنجره نمایش تنظیم کنید.
.box {
width: 50vw; /* 50% of the width of the display window */
height: 50vh; /* 50% of the height of the display window */
background-color: lightgreen;
}
طراحی واکنش‌گرا در CSS به شما این امکان را می‌دهد که وب‌سایت‌ها و صفحات وب خود را برای دستگاه‌ها و اندازه‌های مختلف صفحه نمایش بهینه‌سازی کنید. با استفاده از روش‌ها و تکنیک‌های مختلفی مانند Media Queries، گریدهای انعطاف‌پذیر، تصاویر انعطاف‌پذیر، تایپوگرافی واکنش‌گرا، Flexbox و واحدهای Viewport می‌توانید تجربه کاربری بهتری برای کاربران خود فراهم کنید. تمرین و آزمایش با این روش‌ها به شما کمک می‌کند تا بهترین استفاده را از CSS ببرید و صفحات وب زیبایی را ایجاد کنید که بر روی هر دستگاهی به خوبی نمایش داده شوند.
CSS Grid
CSS Grid یکی از قوی‌ترین ابزارهای چیدمان در CSS است که به شما اجازه می‌دهد تا صفحات وب را به صورت یک شبکه مرتب کنید. سه خصوصیت مهم در CSS Grid که برای تنظیم فاصله بین ستون‌ها و ردیف‌ها استفاده می‌شوند عبارتند از: column-gap, row-gap و gap.
Column-gap
خصوصیت column-gap فاصله بین ستون‌های یک شبکه را تعیین می‌کند. این خصوصیت به شما اجازه می‌دهد تا فضای افقی بین ستون‌ها را تنظیم کنید.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px; /* The distance between the columns */
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
در این مثال، شبکه‌ای با سه ستون ایجاد شده و فاصله بین ستون‌ها 20 پیکسل تنظیم شده است.
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
Row-gap
خصوصیت row-gap فاصله بین ردیف‌های یک شبکه را تعیین می‌کند. این خصوصیت به شما اجازه می‌دهد تا فضای عمودی بین ردیف‌ها را تنظیم کنید.
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
row-gap: 30px; /* Distance between rows */
}
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
در این مثال، شبکه‌ای با سه ردیف ایجاد شده و فاصله بین ردیف‌ها 30 پیکسل تنظیم شده است.
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
Gap
خصوصیت gap ترکیبی از column-gap و row-gap است و به شما اجازه می‌دهد تا به صورت همزمان فاصله بین ستون‌ها و ردیف‌ها را تنظیم کنید.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 15px; /* Spacing between columns and rows */
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
در این مثال، فاصله بین ستون‌ها و ردیف‌ها به صورت همزمان 15 پیکسل تنظیم شده است.
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
</div>
grid-auto-columns
خصوصیت grid-auto-columns برای تعیین اندازه ستون‌های خودکاری که در شبکه ایجاد می‌شوند استفاده می‌شود. این ستون‌ها زمانی ایجاد می‌شوند که تعداد ستون‌ها مشخص نشده باشد و عناصر خارج از محدوده تعریف شده قرار گیرند.
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-auto-columns: 200px; /* Automatic column sizing */
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
در این مثال، اندازه ستون‌های خودکار 200 پیکسل تنظیم شده است.
grid-auto-flow
خصوصیت grid-auto-flow نحوه جریان‌یابی خودکار عناصر در شبکه را تعیین می‌کند. مقادیر ممکن برای این خصوصیت عبارتند از row, column, row dense, و column dense.
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-rows: 100px;
grid-auto-flow: row; /* Stream elements in a row */
}
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
در این مثال، عناصر به صورت ردیفی جریان می‌یابند.
grid-auto-rows
خصوصیت grid-auto-rows برای تعیین اندازه ردیف‌های خودکاری که در شبکه ایجاد می‌شوند استفاده می‌شود. این ردیف‌ها زمانی ایجاد می‌شوند که تعداد ردیف‌ها مشخص نشده باشد و عناصر خارج از محدوده تعریف شده قرار گیرند.
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-rows: 150px; /* Automatic row sizing */
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
در این مثال، اندازه ردیف‌های خودکار 150 پیکسل تنظیم شده است.
grid-column
خصوصیت grid-column یک راه میان‌بر (شورت‌کات) برای تنظیم همزمان grid-column-start و grid-column-end است. این خصوصیت به شما امکان می‌دهد تا محدوده یک عنصر را در ستون‌های شبکه تعریف کنید.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
.grid-item-1 {
grid-column: 1 / 3; /* This element occupies from the first column to the third column */
}
<div class="grid-container">
<div class="grid-item grid-item-1">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
در این مثال، عنصر Item 1 از ستون اول شروع و تا ستون سوم ادامه می‌یابد.
grid-column-end
خصوصیت grid-column-end نقطه پایانی یک عنصر در شبکه را تعیین می‌کند.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
.grid-item-2 {
grid-column-end: 4; /* This element ends in the fourth column */
}
<div class="grid-container">
<div class="grid-item grid-item-2">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
در این مثال، عنصر Item 2 در ستون چهارم به پایان می‌رسد.
grid-column-gap
خصوصیت grid-column-gap فاصله بین ستون‌ها را تنظیم می‌کند. این خصوصیت در حال حاضر به column-gap تغییر نام داده شده است.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px; /* The distance between the columns is 20 pixels */
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
در این مثال، فاصله بین ستون‌ها 20 پیکسل تنظیم شده است.
grid-column-start
خصوصیت grid-column-start نقطه شروع یک عنصر در شبکه را تعیین می‌کند.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightyellow;
padding: 20px;
text-align: center;
}
.grid-item-3 {
grid-column-start: 2; /* This element starts from the second column */
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item grid-item-3">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
در این مثال، عنصر Item 3 از ستون دوم شروع می‌شود.
grid-row
خصوصیت grid-row یک راه میان‌بر برای تنظیم همزمان grid-row-start و grid-row-end است. این خصوصیت به شما امکان می‌دهد تا محدوده یک عنصر را در ردیف‌های شبکه تعریف کنید.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
.grid-item-1 {
grid-row: 1 / 3; /* This element occupies from the first row to the third row */
}
<div class="grid-container">
<div class="grid-item grid-item-1">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
در این مثال، عنصر Item 1 از ردیف اول شروع و تا ردیف سوم ادامه می‌یابد.
grid-row-end
خصوصیت grid-row-end نقطه پایانی یک عنصر در ردیف‌های شبکه را تعیین می‌کند.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
.grid-item-2 {
grid-row-end: 4; /* This element ends in the fourth row */
}
<div class="grid-container">
<div class="grid-item grid-item-2">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
در این مثال، عنصر Item 2 در ردیف چهارم به پایان می‌رسد.
grid-row-gap
خصوصیت grid-row-gap فاصله بین ردیف‌ها را تنظیم می‌کند. این خصوصیت در حال حاضر به row-gap تغییر نام داده شده است.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
row-gap: 20px; /* The distance between rows is 20 pixels */
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
در این مثال، فاصله بین ردیف‌ها 20 پیکسل تنظیم شده است.
grid-row-start
خصوصیت grid-row-start نقطه شروع یک عنصر در ردیف‌های شبکه را تعیین می‌کند.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.grid-item {
background-color: lightyellow;
padding: 20px;
text-align: center;
}
.grid-item-3 {
grid-row-start: 2; /* This element starts from the second row */
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item grid-item-3">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
در این مثال، عنصر Item 3 از ردیف دوم شروع می‌شود.
grid-template
خصوصیت grid-template یک راه میان‌بر برای تعریف همزمان grid-template-rows, grid-template-columns و grid-template-areas است. این خصوصیت به شما امکان می‌دهد تا قالب کلی شبکه خود را در یک خط تعریف کنید.
.grid-container {
display: grid;
grid-template:
"header header header" 100px
"sidebar content content" 200px
"footer footer footer" 100px;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
.grid-header {
grid-area: header;
}
.grid-sidebar {
grid-area: sidebar;
}
.grid-content {
grid-area: content;
}
.grid-footer {
grid-area: footer;
}
<div class="grid-container">
<div class="grid-item grid-header">Header</div>
<div class="grid-item grid-sidebar">Sidebar</div>
<div class="grid-item grid-content">Content</div>
<div class="grid-item grid-footer">Footer</div>
</div>
در این مثال، ما قالب کلی شبکه را با استفاده از grid-template تعریف کرده‌ایم که شامل چهار بخش اصلی: هدر، نوار کناری، محتوا و پاورقی است.
grid-template-areas
خصوصیت grid-template-areas به شما امکان می‌دهد تا مناطق مختلفی از شبکه را نام‌گذاری کنید و با استفاده از این نام‌ها، عناصر را در شبکه قرار دهید.
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-rows: 100px 200px 100px;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
<div class="grid-container">
<div class="grid-item header">Header</div>
<div class="grid-item sidebar">Sidebar</div>
<div class="grid-item content">Content</div>
<div class="grid-item footer">Footer</div>
</div>
در این مثال، ما از grid-template-areas استفاده کرده‌ایم تا بخش‌های مختلف شبکه را نام‌گذاری کنیم و سپس این نام‌ها را به عناصر اختصاص دهیم.
grid-template-columns
خصوصیت grid-template-columns تعداد و اندازه ستون‌های شبکه را تعیین می‌کند.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
در این مثال، ما سه ستون با اندازه‌های مختلف تعریف کرده‌ایم: ستون اول و سوم هر کدام یک بخش (1fr) و ستون وسط دو بخش (2fr) از فضای موجود را اشغال می‌کنند.
grid-template-rows
خصوصیت grid-template-rows تعداد و اندازه ردیف‌های شبکه را تعیین می‌کند.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px 100px;
gap: 10px;
}
.grid-item {
background-color: lightyellow;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
در این مثال، ما سه ردیف با اندازه‌های مختلف تعریف کرده‌ایم: ردیف اول و سوم هر کدام 100 پیکسل و ردیف وسط 200 پیکسل ارتفاع دارند.
grid
خصوصیت grid یک راه میان‌بر برای تعریف چندین ویژگی گرید به طور همزمان است. این ویژگی به شما امکان می‌دهد تا تعداد و اندازه ردیف‌ها و ستون‌ها را در یک خط کد تعریف کنید.
.grid-container {
display: grid;
grid:
"header header header" 100px
"sidebar content content" 200px
"footer footer footer" 100px / 1fr 2fr 1fr;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
.grid-header {
grid-area: header;
}
.grid-sidebar {
grid-area: sidebar;
}
.grid-content {
grid-area: content;
}
.grid-footer {
grid-area: footer;
}
<div class="grid-container">
<div class="grid-item grid-header">Header</div>
<div class="grid-item grid-sidebar">Sidebar</div>
<div class="grid-item grid-content">Content</div>
<div class="grid-item grid-footer">Footer</div>
</div>
در این مثال، با استفاده از grid، همزمان قالب‌بندی ردیف‌ها و ستون‌ها و نام‌گذاری نواحی مختلف شبکه را انجام داده‌ایم.
grid-area
خصوصیت grid-area به شما این امکان را می‌دهد که یک عنصر را در یک یا چند سلول شبکه قرار دهید. این خصوصیت معمولا با نام‌هایی که در grid-template-areas تعریف شده‌اند، استفاده می‌شود.
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-rows: 100px 200px 100px;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
<div class="grid-container">
<div class="grid-item header">Header</div>
<div class="grid-item sidebar">Sidebar</div>
<div class="grid-item content">Content</div>
<div class="grid-item footer">Footer</div>
</div>
در این مثال، از grid-area برای قرار دادن عناصر در نواحی نام‌گذاری شده استفاده کرده‌ایم.
grid-gap
خصوصیت grid-gap (که به دو خصوصیت row-gap و column-gap نیز تقسیم می‌شود) فاصله بین ردیف‌ها و ستون‌های شبکه را تعیین می‌کند.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
در این مثال، grid-gap فاصله بین همه ردیف‌ها و ستون‌های شبکه را به 20 پیکسل تنظیم کرده است.
align-content
خصوصیت align-content نحوه توزیع فضای خالی بین و اطراف محتوای شبکه در محور عمودی (ستون‌ها) را تعیین می‌کند. این خصوصیت فقط در صورتی تاثیرگذار است که فضای خالی در شبکه وجود داشته باشد.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
align-content: center;
height: 400px;
gap: 10px;
}
.grid-item {
background-color: lightyellow;
padding: 20px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
در این مثال، align-content: center تمام محتوای شبکه را در محور عمودی در مرکز قرار داده است.
خب دوستان، به پایان سفر آموزشی CSS رسیدیم. حالا با یادگیری چگونگی ریسپانسیو کردن وب‌سایت‌ها و استفاده از CSS Grid، می‌تونید وب‌سایت‌هایی طراحی کنید که در هر دستگاهی عالی به نظر برسن و از نظر ساختاری بسیار منعطف و قدرتمند باشن. این مهارت‌ها به شما امکان می‌ده تا تجربه کاربری بهتری برای بازدیدکنندگان سایت‌هاتون فراهم کنید و از رقبای خودتون جلو بیفتید.
امیدوارم این دوره آموزشی براتون مفید بوده باشه و بتونید از مطالبش در پروژه‌های واقعی خودتون استفاده کنید. اگر سوالی دارید یا نیاز به راهنمایی بیشتری داشتید، حتما تو نظرات بپرسید. خیلی خوشحالم که همراه من بودید و تا اینجا پیش اومدید. موفق و پیروز باشید و تا آموزش‌های بعدی خداحافظ!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من