CSS Grid-də hüceyrələrin içində hər iki ox üzrə düzləndirmə üçün qısa yazılış

place-items qısa yazılış xüsusiyyətindən istifadə edərək grid hüceyrələrinin içindəki elementləri hər iki ox üzrə eyni vaxtda düzləndirmək olar. Xüsusiyyət boşluqla ayrılmış iki dəyər qəbul edir. Birinci dəyərlə elementi şaquli, ikinci dəyərlə isə üfüqi ox üzrə yerləşdiririk. Xüsusiyyət valideyn elementdə təyin olunur.

Gəlin bu xüsusiyyətin işini nümunələr üzərində görək.

Şaquli mərkəz və üfüqi başlanğıc

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  place-items: center start;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Gəlin grid-imizə debugger-də baxaq:

Şaquli son və üfüqi mərkəz

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: end center;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Gəlin grid-imizə debugger-də baxaq:

Şaquli başlanğıc və üfüqi son

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: start end;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Gəlin grid-imizə debugger-də baxaq:

Praktiki tapşırıqlar