CSS grid area Property
CSS grid-area Property
The grid-area property is used to define a grid item size and location in a grid layout. It is a shorthand property for:-
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
It is used to assign a name to a grid item. Named grid items can then be referenced by the grid-template-areas property of the grid container.
Default Value:-
Its default is:- auto / auto / auto / auto
Syntax:-
Its syntax is:- grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
Further Explanation:-
| Value | Description |
|---|---|
| grid-row-start | Specifies on which row to start displaying the item. |
| grid-column-start | Specifies on which column to start displaying the item. |
| grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
| grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
| itemname | Specifies a name for the grid item |
Code Explanation
All Tutorials related to CSS Properties
accent-color Property in CSS
align-content Property in CSS
align-items Property in CSS
align-self Property in CSS
all Property in CSS
animation Property in CSS
animation-delay Property in CSS
animation-direction Property in CSS
animation-duration Property in CSS
animation-fill-mode Property in CSS
animation-iteration-count Property in CSS
animation-name Property in CSS
animation-play-state Property in CSS
animation-timing-function Property in CSS
backdrop-filter Property in CSS
backface-visibility Property in CSS
background Property in CSS
background-attachment Property in CSS
background-blend-mode Property in CSS
background-clip Property in CSS
background-color Property in CSS
background-image Property in CSS
background-origin Property in CSS
background-position Property in CSS
background-repeat Property in CSS
background-size Property in CSS
border Property in CSS
border-bottom Property in CSS
border-bottom-color Property in CSS
border-bottom-left-radius Property in CSS
border-bottom-right-radius Property in CSS
border-bottom-style Property in CSS
border-bottom-width Property in CSS
border-collapse Property in CSS
border-color Property in CSS
border-image Property in CSS
border-image-outset Property in CSS
border-image-repeat Property in CSS
border-image-slice Property in CSS
border-image-source Property in CSS
border-image-width Property in CSS
border-left Property in CSS
border-left-color Property in CSS
border-left-style Property in CSS
border-left-width Property in CSS
border-radius Property in CSS
border-right Property in CSS
border-right-color Property in CSS
border-right-style Property in CSS
border-right-width Property in CSS
border-spacing Property in CSS
border-style Property in CSS
border-top Property in CSS
border-top-color Property in CSS
border-top-left-radius Property in CSS
border-top-right-radius Property in CSS
border-top-style Property in CSS
border-top-width Property in CSS
CSS border-width Property
bottom Property in CSS
box-decoration-break Property in CSS
box-shadow Property in CSS
box-sizing Property in CSS
break-after Property in CSS
break-before Property in CSS
break-inside Property in CSS
caption-side Property in CSS
caret-color Property in CSS
@charset Rule in CSS
clear Property in CSS
clip Property in CSS
color Property in CSS
column-count Property in CSS
column-fill Property in CSS
column-gap Property in CSS
column-rule Property in CSS
column-rule-color Property in CSS
column-rule-style Property in CSS
column-rule-width Property in CSS
column-span Property in CSS
column-width Property in CSS
columns Property in CSS
content Property in CSS
counter-increment Property in CSS
counter-reset Property in CSS
cursor Property in CSS
direction Property in CSS
display Property in CSS
empty-cells Property in CSS
filter Property in CSS
flex Property in CSS
flex-basis Property in CSS
flex-direction Property in CSS
flex-flow Property in CSS
flex-grow Property in CSS
flex-shrink Property in CSS
flex-wrap Property in CSS
float Property in CSS
font Property in CSS
@font-face Rule in CSS
font-family Property in CSS
font-feature-settings Property in CSS
font-kerning Property in CSS
font-size Property in CSS
font-stretch Property in CSS
font-style Property in CSS
font-variant Property in CSS
font-variant-caps Property in CSS
font-weight Property in CSS
gap Property in CSS
grid Property in CSS
grid-area Property in CSS
grid-auto-columns Property in CSS
grid-auto-flow Property in CSS
grid-auto-rows Property in CSS
grid-column Property in CSS
grid-column-end Property in CSS
grid-column-gap Property in CSS
grid-column-start Property in CSS
grid-gap Property in CSS
grid-row Property in CSS
grid-row-end Property in CSS
grid-row-gap Property in CSS
grid-row-start Property in CSS
grid-template Property in CSS
grid-template-areas Property in CSS
grid-template-columns Property in CSS
grid-template-rows Property in CSS
hanging-punctuation Property in CSS
height Property in CSS
hyphens Property in CSS
image-rendering Property in CSS
isolation Property in CSS
justify-content Property in CSS
@keyframes Rule in CSS
left Property in CSS
letter-spacing Property in CSS
line-height Property in CSS
list-style Property in CSS
list-style-image Property in CSS
list-style-position Property in CSS
list-style-type Property in CSS
margin Property in CSS
margin-bottom Property in CSS
margin-left Property in CSS
margin-right Property in CSS
margin-top Property in CSS
mask-image Property in CSS
mask-mode Property in CSS
mask-origin Property in CSS
mask-position Property in CSS
mask-repeat Property in CSS
mask-size Property in CSS
max-height Property in CSS
max-width Property in CSS
@media Rule in CSS
min-height Property in CSS
min-width Property in CSS
mix-blend-mode Property in CSS
object-fit Property in CSS
object-position Property in CSS
opacity Property in CSS
order Property in CSS
orphans Property in CSS
outline Property in CSS
outline-color Property in CSS
outline-offset Property in CSS
outline-style Property in CSS
outline-width Property in CSS
overflow Property in CSS
overflow-wrap Property in CSS
overflow-x Property in CSS
overflow-y Property in CSS
padding Property in CSS
padding-bottom Property in CSS
padding-left Property in CSS
padding-right Property in CSS
padding-top Property in CSS
page-break-after Property in CSS
page-break-before Property in CSS
page-break-inside Property in CSS
perspective Property in CSS
perspective-origin Property in CSS
pointer-events Property in CSS
position Property in CSS
quotes Property in CSS
resize Property in CSS
right Property in CSS
row-gap Property in CSS
scroll-behavior Property in CSS
tab-size Property in CSS
table-layout Property in CSS
text-align Property in CSS
text-align-last Property in CSS
text-decoration Property in CSS
text-decoration-color Property in CSS
text-decoration-line Property in CSS
text-decoration-style Property in CSS
text-decoration-thickness Property in CSS
text-emphasis Property in CSS
text-indent Property in CSS
text-justify Property in CSS
text-overflow Property in CSS
text-shadow Property in CSS
text-transform Property in CSS
top Property in CSS
transform Property in CSS
transform-origin Property in CSS
transform-style Property in CSS
transition Property in CSS
transition-delay Property in CSS
transition-duration Property in CSS
transition-property Property in CSS
transition-timing-function Property in CSS
unicode-bidi Property in CSS
user-select Property in CSS
vertical-align Property in CSS
visibility Property in CSS
white-space Property in CSS
widows Property in CSS
width Property in CSS
word-break Property in CSS
word-spacing Property in CSS
word-wrap Property in CSS
writing-mode Property in CSS
z-index Property in CSS
