Use CSS Grid like a pro
Learn CSS Grid with live examples and images.
Check it outgrid-column-start specifies where the selected grid item should start (or span) along the grid container’s row (inline) axis.
The grid-column-start
property accepts the following values:
auto
<column-line-number>
span <number-of-columns>
section { display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: orange; margin: 50px; min-height: 300px;}
div { border: 1px solid black; background-color: purple; color: white; padding: 20px; border-radius: 5px;}
.grid-item1 { grid-column-start: auto;}
<section> <div class="grid-item1">1</div> <div class="grid-item2">2</div> <div class="grid-item3">3</div> <div class="grid-item4">4</div> <div class="grid-item5">5</div> <div class="grid-item6">6</div> <div class="grid-item7">7</div> <div class="grid-item8">8</div> <div class="grid-item9">9</div></section>
The snippet above used the auto
value to auto-start grid-item1
according to the normal column layout flow.
section { display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: orange; margin: 50px; min-height: 300px;}
div { border: 1px solid black; background-color: purple; color: white; padding: 20px; border-radius: 5px;}
.grid-item1 { grid-column-start: 3;}
<section> <div class="grid-item1">1</div> <div class="grid-item2">2</div> <div class="grid-item3">3</div> <div class="grid-item4">4</div> <div class="grid-item5">5</div> <div class="grid-item6">6</div> <div class="grid-item7">7</div> <div class="grid-item8">8</div> <div class="grid-item9">9</div></section>
The snippet above used the grid-column-start
property to start grid-item1
at column line 3
.
section { display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: orange; margin: 50px; min-height: 300px;}
div { border: 1px solid black; background-color: purple; color: white; padding: 20px; border-radius: 5px;}
.grid-item1 { grid-column-start: span 2;}
<section> <div class="grid-item1">1</div> <div class="grid-item2">2</div> <div class="grid-item3">3</div> <div class="grid-item4">4</div> <div class="grid-item5">5</div> <div class="grid-item6">6</div> <div class="grid-item7">7</div> <div class="grid-item8">8</div> <div class="grid-item9">9</div></section>
The snippet above used the span 2
value to span grid-item1
across two columns.