021-28423015

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-template-columns
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}
مشاهده مثال

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

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

4 ستون
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}
مشاهده مثال

ویژگی grid-template-rows

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

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

ویژگی grid-template-rows
.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}
مشاهده مثال

ویژگی justify-content

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

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

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: space-evenly;
}
مشاهده مثال

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: space-around;
}
مشاهده مثال

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: space-between;
}
مشاهده مثال

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: center;
}
مشاهده مثال

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: start;
}
مشاهده مثال

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: end;
}
مشاهده مثال

ویژگی align-content

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

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

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: start;
}
مشاهده مثال

ویژگی justify-content
.grid-container {
  display: grid;
  justify-content: end;
}
مشاهده مثال

ویژگی align-content
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}
مشاهده مثال

ویژگی align-content
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}
مشاهده مثال

ویژگی align-content
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}
مشاهده مثال

ویژگی align-content
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}
مشاهده مثال

ویژگی align-content
.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}
مشاهده مثال

ویژگی align-content
.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}
مشاهده مثال

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط