Container شبکه(Grid) در CSS

Container شبکه(Grid)  

برای ایجاد یک عنصر HTML به عنوان یک Container عمل می کند، شما باید ویژگی display  را به Grid یا inline-grid تنظیم کنید.

Container شامل items ، داخل ستون ها و ردیف ها قرار می گیرند.

ویژگی grid-template-columns

خصوصیات grid-template-columns تعداد ستون ها را در طرح شبکه شما تعریف می کند و می تواند عرض هر ستون را تعریف کند.

مقدار یک space-separated-list است، جایی که هر مقدار طول ستون مربوطه را مشخص می کند.

اگر می خواهید طرح شبکه خود را حاوی 4 ستون، عرض 4 ستون را مشخص کنید، و یا اگر " auto " را انتخاب کنید تمام ستون ها هم عرض می شوند.

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

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

خصوصیات grid-template-columns همچنین می توان برای تعیین اندازه (عرض) ستونها استفاده کرد.

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

ویژگی grid-template-rows

خصوصیات grid-template-rows ارتفاع هر سطر را مشخص می کند.

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

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

ویژگی justify-content

Property justify-content برای تنظیم تمام شبکه در داخل Container استفاده می شود.

نکته: عرض کلی باید بیشتر از عرض Container برای محتوای توجیهی محتوا باشد تا اثر داشته باشد.

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

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

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

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

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

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

ویژگی align-content

خصوصیات align-content برای تنظیم عمودی تمام شبکه در داخل Containerاستفاده می شود.

نکته: ارتفاع کلی شبکه باید دارای ویژگی کمتری نسبت به ارتفاع Container برای محتوا باشد.

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

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

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

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

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

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

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

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