Vlastnost justify-content

Vlastnost justify-content zarovná položky.

Hodnota "end" zarovná položky na konce kontejneru.

1
2
3
4
5
6
Výpis kódu

&st;!DOCTYPE html>
&st;html>
&st;head>
&st;style>
.grid-container {
  display: grid;
  justify-content: end;
  grid-template-columns: 10em 10em 10em; /* položky uděláme schválně malé*/
  gap: 0.5em;
  background-color: #ffffff;
  padding: 0.25em;
}

.grid-container > div {
  background-color: rgba(230, 230, 230, 0.8);
  text-align: center;
  padding: 0.5em;
  font-size: 1.2em;
  border: 1px solid black;
}
&st;/style>
&st;/head>
&st;body>

&st;h1>Vlastnost justify-content &st;/h1>

&st;p>Vlastnost &st;em>justify-content&st;/em> zarovná položky.&st;/p>

&st;p>Hodnota "end" zarovná položky na konec kontejneru;/p>

&st;div class="grid-container">
  &st;div>1&st;/div>
  &st;div>2&st;/div>
  &st;div>3&st;/div>  
  &st;div>4&st;/div>
  &st;div>5&st;/div>
  &st;div>6&st;/div>  
&st;/div>

&st;/body>
&st;/html>