آموزش گسترش(span) آیتم های گرید در CSS

آیتم های گرید در CSS

یک ظرف(container) گرید می تواند حاوی یک یا چند آیتم گرید باشد. 

تمام عناصر مستقیم یک ظرف(container)، به طور اتوماتیک آیتم های گرید محسوب می شوند. 

در زیر، یک ظرف گرید را به همراه پنج آیتم گرید مشاهده می کنید:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
</div>

سایزدهی و گسترش آیتم های گرید در CSS

یک آیتم گرید می تواند به اندازه ی چند ستون(column) یا چند ردیف(row) گسترش پیدا کند.  ما می توانیم با استفاده از ویژگی های زیر، مشخص کنیم که یک آیتم گرید از کجا شروع شود و در کجا پایان یابد:

• grid-column-start : مشخص می کند که آیتم گرید از کدام خط ستونی شروع شود. 
• grid-column-end : مشخص می کند که گرید در کدام خط ستونی پایان یابد. 
• grid-column : این یک ویژگی خلاصه شده برای ویژگی های grid-column-start و grid-column-end است. 
• grid-row-start : مشخص می کند که آیتم گرید از کدام خط ردیفی شروع شود. 
• grid-row-end : مشخص می کند که آیتم گرید در کدام خط ردیفی پایان یابد. 
• grid-row : این یک ویژگی خلاصه شده برای ویژگی های grid-row-start و grid-row-end است. 

خطوط بین ستون ها در یک گرید را خطوط ستونی(column-lines) و خطوط بین ردیف ها در یک گرید را خطوط ردیفی(row-lines) می نامیم. 

بررسی ویژگی های grid-column-start و grid-column-end

ویژگی grid-column-start مشخص می کند که آیتم گرید از کدام خط ستونی شروع شود. 

ویژگی grid-column-end مشخص می کند که آیتم گرید در کدام خط ستونی پایان یابد. 

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

بررسی ویژگی grid-column در CSS

ویژگی grid-column یک ویژگی خلاصه شده از ویژگی های grid-column-start و grid-column-end است. 

.item1 {
  grid-column: 1 / span 2;
}

بررسی ویژگی های grid-row-start و grid-row-end

ویژگی grid-row-start مشخص می کند که آیتم گرید از کدام خط ردیفی(row-line) شروع شود. 

ویژگی grid-row-end مشخص می کند که آیتم گرید تا کدام خط ردیفی(row-line) پایان یابد. 

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

ویژگی grid-row در CSS

ویژگی grid-row یک ویژگی خلاصه شده برای ویژگی های grid-row-start و grid-row-end می باشد. 

.item1 {
  grid-row: 1 / span 2;
}

ترکیب grid-column و grid-row

ما در مصال زیر، از هردوی ویژگی های grid-column و grid-row استفاده کرده ایم تا به یک آیتم گرید امکان دهیم تا هم به صورت ستونی و هم به صورت ردیفی گسترش پیدا کند. 

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

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