آموزش تراز کردن محتوای گرید(Grid Content) در CSS

با استفاده از ویژگی های زیر، می توانیم محتوای گرید را در درون ظرف گرید(grid container) تراز کنیم:

• justify-content : این ویژگی محتوای گرید را وقتی که از تمام فضای در دسترس محور x (افقی) استفاده نمی کند، تراز می کند. 
• align-content : این ویژکی محتوای گرید را وقتی که از تمام فضای در دسترس محور y (عمودی) استفاده نمی کند، تراز می کند. 
• place-content : این یک ویژگی خلاصه شده برای ویژگی های align-content و justify-content است. 

ویژگی justify-content

از ویژگی justify-content برای تراز کردن محتوای گرید، وقتی که از تمام فضای در دسترس محور x (افقی) استفاده نمی کند، استفاده می شود. این ویژگی می تواند یکی از مقادیر را داشته باشد:

• space-evenly
• space-around
• space-between
• center
• start
• end

نکته: عرض کلی محتوای گرید(grid content) باید کمتر از عرض ظرف(container) باشد تا ویژگی justify-content تاثیر داشته باشد. 

.container {
  display: grid;
  justify-content: space-evenly;
}

.container {
  display: grid;
  justify-content: space-around;
}

.container {
  display: grid;
  justify-content: space-between;
}

.container {
  display: grid;
  justify-content: center;
}

.container {
  display: grid;
  justify-content: start;
}

.container {
  display: grid;
  justify-content: end;
}

آموزش استفاده از ویژگی align-content در CSS

ویژگی align-content محتوای گرید را وقتی که از تمام فضای در دسترس محور y (عمودی) استفاده نمی کند، تراز می کند. این ویژگی می تواند یکی از مقادیر زیر را داشته باشد:

• space-evenly
• space-around
• space-between
• center
• start
• end

نکته: عرض کلی محتوای گرید(grid content) باید کمتر از عرض ظرف(container) باشد تا ویژگی justify-content تاثیر داشته باشد. 

.container {
  display: grid;
  height: 300px;
  align-content: center;
}

.container {
  display: grid;
  height: 300px;
  align-content: space-evenly;
}

.container {
  display: grid;
  height: 300px;
  align-content: space-around;
}

.container {
  display: grid;
  height: 300px;
  align-content: space-between;
}

.container {
  display: grid;
  height: 300px;
  align-content: start;
}

.container {
  display: grid;
  height: 300px;
  align-content: end;
}

ویژگی place-content در CSS

ویژگی place-content یک ویژگی خلاصه شده برای ویژگی های align-content و justify-content است. 

اگر place-content دو مقدار داشته باشد:

در دستورplace-content: start center; : مقدار align-content برابر با start و مقدار justify-content برابر با center خواهد بود. 

اگر place-content یک مقدار داشته باشد:

در دستور place-content: end; مقدار هردوی align-content و justify-content برابر با end خواهد بود.

نکته: ارتفاع و عرض کلی آیتم های گرید باید کمتر از ارتفاع و عرض ویژگی place-content باشد تا تاثیر داشته باشد. 

.container {
  display: grid;
  height: 300px;
  place-content: center;
}

.container {
  display: grid;
  height: 300px;
  place-content: end space-between;
}

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