CSS-ruudukkosäilö


Sisällysluettelo

    Näytä sisällysluettelo


Grid Container koostuu sarakkeisiin ja riveihin järjestetyistä ruudukkokohteista

1

2

3

4

5

6

7

8

Ruudukkosäiliön suorista alielementeistä tulee automaattisesti ruudukkokohteita.

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Container</h1>

<p>A Grid Container consists of grid items arranged in columns and rows</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

</body>
</html>



Grid Container

Jos haluat saada HTML-elementin toimimaan ruudukon säilönä, sinun on määritettävä display-ominaisuuden arvoksi grid tai < code class="w3-codespan">inline-grid.

Ruudukkosäiliöt koostuvat sarakkeiden ja rivien sisään sijoitetuista ruudukkoelementeistä.


Grid-template-sarakkeet Ominaisuus

Ominaisuus grid-template-columns määrittää sarakkeiden lukumäärän ruudukkoasettelussasi ja voi määrittää kunkin sarakkeen leveyden.

Arvo on välilyönnillä eroteltu luettelo, jossa jokainen arvo määrittää vastaavan sarakkeen leveyden.

Jos haluat ruudukon asettelun sisältävän 4 saraketta, määritä 4 sarakkeen leveys tai "automaattinen", jos kaikkien sarakkeiden tulee olla saman leveitä.

Esimerkki

Tee ruudukko, jossa on 4 saraketta:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template-columns Property</h1>

<p>You can use the <em>grid-template-columns</em> property to specify the number of columns in your grid layout.</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

</body>
</html>


Huomaa: Jos sinulla on enemmän kuin 4 kohdetta 4 sarakkeen ruudukossa, ruudukko tulee automaattisesti lisää uusi rivi kohteiden sijoittamista varten.

Ominaisuutta grid-template-columns voidaan käyttää myös sarakkeiden koon (leveyden) määrittämiseen.

Esimerkki

Aseta koko neljälle sarakkeelle:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 30px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template-columns Property</h1>

<p>Use the <em>grid-template-columns</em> property to specify the size of each column.</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

</body>
</html>



Grid-template-rows-ominaisuus

Ominaisuus grid-template-rows määrittää kunkin rivin korkeuden.

1

2

3

4

5

6

7

8

Arvo on välilyönnillä eroteltu luettelo, jossa jokainen arvo määrittää vastaavan rivin korkeuden:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template-rows Property</h1>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

<p>Use the <em>grid-template-rows</em> property to specify the size (height) of each row.</p>

</body>
</html>




Perustelevan sisällön ominaisuus

justify-content-ominaisuutta käytetään koko ruudukon tasaamiseen säilön sisällä.

1

2

3

4

5

6

Huomaa: ruudukon kokonaisleveyden on oltava pienempi kuin säilön leveys, jotta justify-content-ominaisuudella olisi vaikutusta.

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-evenly" will give the columns equal amount of space between, and around them:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-around" will give the columns equal amount of space around them:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-between" will give the columns equal amount of space between them:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "center" will align the grid in the middle of the container:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: start;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "start" will align the grid at the beginning of the container:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: end;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "end" will align the grid at the end of the container:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>



Tasaa sisällön ominaisuus

align-content-ominaisuutta käytetään pystysuoraan tasaamaan koko ruudukko säilön sisällä.

1

2

3

4

5

6

Huomaa: ruudukon kokonaiskorkeuden on oltava pienempi kuin säilön korkeus, jotta align-content-ominaisuudella olisi vaikutusta.

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "center" will align the rows in the middle of the container:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-evenly" will give the rows equal amount of space between, and around them:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-around" will give the rows equal amount of space around them:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-between" will give the rows equal amount of space between them:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "start" will align the rows at the beginning of the container:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>


Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "end" will align the rows at the end of the container:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>