Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Grid

Wyrównywanie elementów siatki

kodzik

info

Wyrównywanie elementów siatki (wyrównanie do ramki)

justify-items– wyrównuje elementy siatki wzdłuż osi wiersza (poziomo)
– ta wartość dotyczy wszystkich elementów siatki w kontenerze
align-items– wyrównuje elementy siatki wzdłuż osi kolumny (pionowo)
– ta wartość dotyczy wszystkich elementów siatki w kontenerze

Wartości:

  • auto
  • normal
  • start
  • end
  • center
  • stretch (domyślne)
  • baseline
  • first baseline
  • last baseline

place-items

Właściwość place-items jest używana w układach flexbox i grid i jest właściwością skróconą dla następujących właściwości:

align-items
   justify-items

Jeśli właściwość place-items ma dwie wartości:

place-items: start center;

wartość właściwości align-items to ’start’
wartość właściwości justify-items to ’center’

syntax (składnia)
/* Keyword values */
place-items: center;
place-items: normal start;

/* Positional alignment */
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;

align-items

wspólne własności
HTML 
(od wrap-13 do wrap-18)

<div class="wrap wrap-13">
    <div>grid</div>
    <div>grid</div>
    <div>grid</div>
</div>
CSS


.wrap {
border: 1px dashed white;
width: 310px;
height: 310px;
margin: 0 auto;
display: grid;
}
.wrap-13 {
    align-items: start;
}
grid
grid
grid
.wrap-14 {
    align-items: end;
}
grid
grid
grid
.wrap-15 {
    align-items: center;
}
grid
grid
grid
.wrap-16 {
    align-items: stretch;
}
grid
grid
grid
.wrap-17 {
    align-items: baseline;
}
grid
grid
grid
.wrap-18 {
    justify-items: center;
    align-items: center;
}
grid
grid
grid

justify-items

wspólne własności
HTML 
(od wrap-19 do wrap-22)

<div class="wrap wrap-19">
    <div>grid</div>
    <div>grid</div>
    <div>grid</div>
</div>
CSS


.wrap {
border: 1px dashed white;
width: 310px;
height: 310px;
margin: 0 auto;
display: grid;
}
.wrap-19 {
    justify-items: start;
}
grid
grid
grid
.wrap-20 {
    justify-items: end;
}
grid
grid
grid
.wrap-21 {
    justify-items: center;
}
grid
grid
grid
.wrap-22 {
    justify-items: stretch;
}
grid
grid
grid

linki