Grid Column y Grid Row son propiedades css utilizadas para definir desde que grilla a que grilla va a abarcar un contenedor

Ejemplos

Ej 1:

https://carbon.now.sh/?bg=rgba(255%2C255%2C255%2C0)&t=seti&wt=none&l=css&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=.container%257B%250A%2520%2520%2520%2520height%253A%252090vh%253B%250A%2520%2520%2520%2520display%253A%2520grid%253B%250A%2520%2520%2520%2520grid-template-columns%253A%2520repeat(3%252C%2520100px)%253B%250A%2520%2520%2520%2520grid-template-rows%253A%2520repeat(3%252C%2520100px)%253B%250A%2520%2520%2520%2520place-content%253A%2520center%253B%250A%2520%2520%2520%2520border%253A%25205px%2520solid%2520black%253B%250A%2520%2520%2520%2520gap%253A%252010px%253B%250A%257D%250A.item%257B%250A%2520%2520%2520%2520border%253A%25205px%2520solid%2520black%253B%250A%257D%250A.item--2%257B%250A%2520%2520%2520%2520grid-column%253A%25202%252F4%253B%250A%257D%250A.item--3%257B%250A%2520%2520%2520%2520grid-column%253A%25201%252F3%253B%250A%257D%250A%2520%2520return%2520go(f%252C%2520seed%252C%2520%255B%255D)%250A%257D

Untitled

Ej 2:

https://carbon.now.sh/?bg=rgba(255%2C255%2C255%2C0)&t=seti&wt=none&l=css&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=.container%257B%250A%2520%2520%2520%2520border%253A%25205px%2520solid%2520black%253B%250A%2520%2520%2520%2520background-color%253A%2520white%253B%250A%2520%2520%2520%2520display%253A%2520grid%253B%250A%2520%2520%2520%2520grid-template-columns%253A%2520repeat(3%252C%2520150px)%253B%250A%2520%2520%2520%2520grid-template-rows%253A%2520repeat(3%252C%252075px)%253B%250A%2520%2520%2520%2520gap%253A%252020px%253B%250A%2520%2520%2520%2520padding%253A%252020px%253B%250A%2520%2520%2520%2520place-content%253A%2520center%253B%250A%2520%2520%2520%2520grid-template-areas%253A%2520%250A%2520%2520%2520%2520%2522header%2520header%2520header%2522%2520%250A%2520%2520%2520%2520%2522side%2520main%2520main%2522%250A%2520%2520%2520%2520%2522side%2520main%2520main%2522%253B%250A%257D%250A.item%257B%250A%2520%2520%2520%2520font-size%253A%25204rem%253B%2520%2520%2520%250A%257D%250A.item--1%257B%250A%2520%2520%2520%2520background-color%253A%2520aqua%253B%250A%2520%2520%2520%2520border%253A%25205px%2520solid%2520black%253B%250A%2520%2520%2520%2520%252F*%2520grid-column-start%253A%25201%253B%250A%2520%2520%2520%2520grid-column-end%253A%25204%253B%2520*%252F%250A%2520%2520%2520%2520grid-area%253A%2520header%253B%250A%250A%257D%250A.item--2%257B%250A%2520%2520%2520%2520background-color%253A%2520brown%253B%250A%2520%2520%2520%2520border%253A%25205px%2520solid%2520black%253B%250A%2520%2520%2520%2520%252F*%2520grid-row%253A%25202%2520%252F%25204%253B%2520*%252F%250A%2520%2520%2520%2520grid-area%253A%2520side%253B%250A%257D%250A.item--3%257B%250A%2520%2520%2520%2520background-color%253A%2520burlywood%253B%250A%2520%2520%2520%2520border%253A%25205px%2520solid%2520black%253B%250A%2520%2520%2520%2520%252F*%2520grid-area%253A%25202%2520%252F%25202%2520%252F%25204%2520%252F%25204%253B%2520*%252F%250A%2520%2520%2520%2520grid-area%253A%2520main%253B%250A%257D

Untitled