آموزش کار با ردیف ها و ستون های گرید در CSS

ما در درون ظرف گرید، تعداد و سایز ستون ها(columns) و ردیف های(rows) گرید را مشخص می کنیم. برای انجام این کار، از ویژگی های زیر استفاده می کنیم:

1. grid-template-columns : این ویژگی، تعداد و عرض(width) ستون های درون گرید را مشخص می کند. 
2. grid-template-rows : این ویژگی تعداد و ارتفاع(height) ردیف ها را در گرید مشخص می کند. 
3. grid-template-areas : این ویژگی روش نمایش ستون ها و ردیف ها را با استفاده از آیتم های گرید نام گذاری شده، تعریف می کند. 

ویژگی grid-template-columns در CSS

ویژگی grid-template-columns تعداد و عرض ستون ها را در گرید مشخص می کند. مقدار این ویژگی، یک لیست از مقادیر است که با استفاده از فاصله های سفید از یکدیگر جدا شده اند؛ به طوری که هر مقدار، عرض ستون مربوطه را مشخص می کند. مقادیر متداول به صورت زیر هستند:

(100px 300px 200px) مقادیر ثابت
درصد (20% 60% 20%)
(1fr 2fr 1fr) واحد اف آر
auto (auto auto auto)
repeat() (repeat(3, 1fr))
minmax() (minmax(80px, 1fr) 150px 150px)

دستور grid-template-columns: auto در CSS

برای ایجاد یک چینش گرید که سه ستون برابر داشته باشد، از کلمه ی کلیدی auto استفاده می کنیم. 

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

ستون های گرید با عرض مختلط

برای ایجاد یک چینش گرید با سه ستون، به طوری که دو ستون آن، عرض ثابتی داشته باشند و سایز یک ستون نیز برابر با auto باشد، به صورت زیر عمل کنید:

.container {
  display: grid;
  grid-template-columns: 80px 200px auto;
}

نکته: اگر در یک گرید سه ستونه، بیش از سه آیتم گرید قرار داشته باشد، این گرید به طور اتوماتیک ردیف های جدیدی را اضافه می کند تا آیتم ها در آن جا شوند. 

استفاده از ستون های گرید با واحد fr

fr مخفف کلمه ی "fraction" به معنی قسمت است. این واحد، به طور اتوماتیک فضای در دسترس را به چند قسمت تقسیم می کند. 1fr یک قسمت از فضای در دسترس را اشغال می کند، درحالیکه 2fr دو قسمت از فضای در دسترس را اشغال می کند. 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

ستون های گرید به همراه تابع repeat()

از تابع repeat() برای تکرار کردن مقدار یک مجموعه از ستون ها یا ردیف ها در گرید استفاده می شود. 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

ستون های گرید و تابع minmax()

از تابع minmax() برای تعریف یک محدوده یا بازه،  که بزرگتر یا مساوی با یک مقدار مینیمم(min) و کوچکتر یا مساوی با یک مقدار ماکزیمم(max) است، استفاده می شود. 

.container {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 150px 150px;
}

ویژگی grid-template-rows در CSS

ویژگی grid-template-rows تعداد و ارتفاع ردیف ها(row) را در گرید تعریف می کند. مقدار این ویژگی، یک لیست است که محتوای آن با استفاده از فاصله ی سفید از یکدیگر جدا شده اند و هر مقدار بیانگر ارتفاعِ ردیفِ(row) مربوطه است. 

مقادیر متداول این ویژگی عبارتند از:

• طول های ثابت
• درصد
• واحد fr
• auto
• min-content
• max-content
• repeat()
• minmax()
• fit-content()

.container {
  display: grid;
  grid-template-rows: 80px 200px;
}

نکته: توجه کنید که اولین ردیف در گرید 80px ارتفاع دارد و دومین ردیف 200px ارتفاع دارد و ردیف های بعدی به طور پیش فرض از مقدار auto استفاده می کنند.

منبع: https://www.w3schools.com/css