Editing CSS Grid (section)

== Columns and rows ==

We also have to create columns and or rows. The CSS properties {{code|inline=y|lang=css|grid-template-columns}} and {{code|inline=y|lang=css|grid-template-rows}} are used to create columns and rows.

<source lang="html5">
<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
</style>
</source>

You can set the amount of columns by adding or removing values:
* {{code|inline=y|lang=css|grid-template-columns: 200px 200px;}} will create two columns of each 200 pixels width. 
* {{code|inline=y|lang=css|grid-template-columns: 200px 200px 200px;}} will create 3 columns of each 200 pixels width
* {{code|inline=y|lang=css|grid-template-columns: 300px 500px 500px;}} will create 3 columns, the first and last 200 pixels wide. The middle column 500 pixels wide.

The following snippet combines columns and rows to create a grid.
{{Columns}}
{{Column}}<source lang="html5">
<div class="grid-container">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
  <div>Grid item 4</div>
  <div>Grid item 5</div>
  <div>Grid item 6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
</style>
</source>
{{ColumnEnd}}
{{Column}}[[File:CSS-grid-display-grid-with-rows.png]]{{ColumnEnd}}
{{ColumnsEnd}}