CSS Grid-column-start Property - W3docs

Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools

• Password Generator
• HTML Editor
• HTML Encoder
• Base 64
• Code Diff
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• JTW Decoder

CSS Maker

• CSS Maker
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face

Color Tools

• Color Picker
• Colors CMYK
• Colors HWB
• Colors HSL
• Color Hex
• Color mixer
• Color Converter
• Colors RGB
• Color Contrast Analyzer
• Color Gradient

String Tools

• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

Change theme

• Dark
• Light
• System

• CSS Basic CSS IntroductionCSS UsageCSS SyntaxCSS id and classCSS TextCSS FontCSS LinksCSS TablesCSS BorderCSS PaddingCSS MarginCSS Color NamesCSS Gradients
• CSS Guides Flexbox GuideCSS3 Properties
• CSS Selectors CSS Selectors*:active::after::before:checked:default:dir():disabled:empty:enabled:first-child::first-letter::first-line:first-of-type:focus:fullscreen:hover:in-range:indeterminate:invalid:lang():last-child:last-of-type:link:not():nth-child():nth-last-child:nth-last-of-type():nth-of-type:only-child:only-of-type:optional:out-of-range::placeholder:read-only:read-write:required:root:scope::selection:target:valid:visited
• CSS Properties align-contentalign-itemsallanimationalign-selfanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionappearancebackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizebleedblock-overflowborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-style
• border-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumnscolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfillfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-displayfont-familyfont-feature-settings@font-feature-valuesfont-kerning
• font-sizefont-size-adjustfont-language-overridefont-stretchfont-stylefont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-rendering@importinitial-letterisolationjustify-contentjustify-items@keyframesleftletter-spacingline-breakline-clampline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-height
• max-linesmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-breakpage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originplace-itemspointer-eventspositionquotesresizerightscroll-behaviorscrollbarshape-outsidespeakstrokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-widthtab-sizetable-layout
• text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-fill-colortext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-stroketext-stroke-colortext-stroke-widthtext-transformtext-underline-positiontoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiunicode-rangeuser-selectvertical-alignvisibilitywhite-spacewidowswidthwill-changeword-breakword-spacingword-wrapwriting-modez-indexzoom

CSS grid-column-start Property ❮ Prev Next ❯

The grid-column-start property specifies the start position of the item within the column by adding a line, a span, or nothing. In other words, it defines the block-start position of its grid area.

Initial Value	auto
Applies to	Grid items.
Inherited	No.
Animatable	Yes. The starting point is animatable.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridColumnStart = "6";

Syntax

grid-column-start: auto | span n | column-line | initial | inherit;

Example of the grid-column-start property:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; background-color: #666; padding: 10px; } .grid-container > div { background-color: #ccc; text-align: center; padding: 20px 0; font-size: 30px; } .box1 { grid-column-start: 6; } </style> </head> <body> <h2>Grid-column-start property example</h2> <div class="grid-container"> <div class="box1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html> Try it Yourself »

Result

Here, we have specified from which column the display of the item should start. In the following example, we have specified the number of columns the item will span.

Example of the grid-column-start property specified as "span 2":

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .span-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; background-color: #888; padding: 10px; margin-top: 20px; } .span-container > div { background-color: #fff; text-align: center; padding: 20px 0; font-size: 30px; } .span-box1 { grid-column-start: span 2; } </style> </head> <body> <h2>Grid-column-start property example</h2> <div class="span-container"> <div class="span-box1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html> Try it Yourself »

Example of the grid-column-start property with the "auto" value:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; background-color: #666; padding: 10px; } .grid-container > div { background-color: #ccc; text-align: center; padding: 20px 0; font-size: 30px; } .box1 { grid-column-start: auto; } </style> </head> <body> <h2>Grid-column-start property example</h2> <div class="grid-container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <div class="box6">6</div> <div class="box7">7</div> <div class="box8">8</div> <div class="box9">9</div> </div> </body> </html> Try it Yourself »

Example of the grid-column-start property with the "column-line" value:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 12px; background-color: red; padding: 15px; } .grid-container>div { background-color: #dcdcdc; text-align: center; padding: 20px 0; font-size: 35px; color: white; } .box1 { grid-column-start: 4; } </style> </head> <body> <h1> Grid-column-start Property </h1> <div class="grid-container"> <div class="box1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html> Try it Yourself »

Values

Value	Description	Play it
auto	Only one column will be spanned. This is the default value of this property.	Play it »
span n	Specifies the number of columns the item will span.	Play it »
column-line	Specifies on which column the display of the item should start.	Play it »

Browser support

57.0+	16.0+	52.0+	10.1+	44.0+

Practice Your Knowledge

What does the CSS grid-column-start property do? It instructs the browser where to start the column in a grid layout. It specifies the sender's email address in a contact form. It defines the character encoding for the HTML document. It determines the width of a border in a grid layout. It determines where an item is placed in a grid layout. Correct! Incorrect! Submit

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

• CSS Basics

❮ Prev Next ❯

Related Resources

• CSS grid Property
• CSS grid-column-end Property
• CSS grid-column Property
• CSS grid-row-start Property
• CSS grid-row-end Property
• CSS grid-row Property

Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes

• PHP basics
• HTML Basics
• Javascript Basics
• CSS Basics
• ES6 Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Git Basics
• Vue.js Basics
• SQL Basics
• Python Basics
• Java Basics
• NodeJS Basics