grid.layoutit.com Open in urlscan Pro
143.204.176.120  Public Scan

Form analysis
2 forms found in the DOM

POST https://codepen.io/pen/define

<form id="codepenForm" action="https://codepen.io/pen/define" method="POST" target="_blank" data-v-a27fcca6="" style="float: left;"><input id="codepenData" type="hidden" name="data"><button type="submit" class="expanded" title="CodePen"
    data-v-653f8208=""><svg width="20" height="20" viewBox="0 0 1792 1792" style="vertical-align: text-bottom;">
      <path
        d="M216 1169l603 402v-359l-334-223zm-62-144l193-129-193-129v258zm819 546l603-402-269-180-334 223v359zm-77-493l272-182-272-182-272 182zm-411-275l334-223v-359l-603 402zm960 93l193 129v-258zm-138-93l269-180-603-402v359zm485-180v546q0 41-34 64l-819 546q-21 13-43 13t-43-13l-819-546q-34-23-34-64v-546q0-41 34-64l819-546q21-13 43-13t43 13l819 546q34 23 34 64z"
        fill="#eee"></path>
    </svg><span data-v-653f8208="">CodePen</span></button></form>

<form data-v-a27fcca6=""><button type="button" class="" title="CodeSandbox" data-v-653f8208=""><svg width="20" height="20" viewBox="0 0 256 296" style="transform: rotate(360deg);">
      <path
        d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54zm23.814.627l50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82zm80.66-180.887l-48.817-28.289l-42.863 24.872l-43.188-24.897l-49.252 28.667l91.914 52.882l92.206-53.235zM0 222.212V74.495L127.987 0L256 74.182v147.797l-128.016 73.744L0 222.212z"
        fill="#eee"></path>
    </svg><!----></button></form>

Text Content

v2v1

v2v1
.CONTAINER



EXPLICIT GRID


GRID-TEMPLATE-COLUMNS

add+
frpx%emautomin-contentmax-contentminmax
frpx%emautomin-contentmax-contentminmax
frpx%emautomin-contentmax-contentminmax


GRID-TEMPLATE-ROWS

add+
frpx%emautomin-contentmax-contentminmax
frpx%emautomin-contentmax-contentminmax
frpx%emautomin-contentmax-contentminmax


ROW-GAP

px%em


COLUMN-GAP

px%em


IMPLICIT GRID


GRID PLACEMENT


AREA BOX

1

2

3

4

1

2

3

4





1fr
1fr
1fr
1fr
1fr
1fr
Your grid has been saved! ×
CodePen

HTML Copy

<div class="container"></div>

CSS Copy

.container {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". . ."
    ". . ."
    ". . ."; 
}


SETTINGS

Crafted with ♥ by Leniolabs_Hire our front end team!