Full-page grid

Based on flex-box layout.

<div class="t1 t1-start w-full flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-16 mb-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-16 mb-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-16 mb-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-16 mb-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-basis-0 w10:flex-grow-2 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-16 mb-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-basis-0 w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-basis-0 w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-16 mb-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-basis-0 w10:flex-grow-2 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-basis-0 w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-16 mb-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-basis-0 w10:flex-grow-2 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> <div class="t1 flex w10:flex-basis-0 w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start mt-0 mb-16 w10:mt-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-800"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-640"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-512 w10:max-w-480"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-416 w7:max-w-512 w10:max-w-320"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 bg-c-black-20 h-32"></div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center bg-c-blue min-h-200"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 flex flex-center font-24 w6:font-40 color-white bg-c-white-20 b-2-dashed-white rounded-4"> Custom background color </div> </div> </div> </div> </div>

<div class="t1 max-h-300 overflow-auto"> <div class="t1 t1-start bg-cover bg-center" style="background-image:url(/assets/christopher-czermak-crbcdpgtpf4-unsplash-s.jpg?o1-cache=1);"> <div class="t1 flex flex-center bg-c-black-40 min-h-500"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 flex flex-center font-32 w6:font-40 color-white bg-c-white-20 b-2-dashed-white rounded-4"> Scrolling background </div> </div> </div> </div> </div> </div> </div>

<div class="t1 max-h-300 overflow-auto"> <div class="t1 t1-start bg-cover bg-center bg-fixed" style="background-image:url(/assets/christopher-czermak-crbcdpgtpf4-unsplash-s.jpg?o1-cache=1);"> <div class="t1 flex flex-center bg-c-black-40 min-h-500"> <div class="t1 flex flex-col w10:flex-row w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex w10:flex-grow-1 w-full"> <div class="t1 flex w-full flex-col justify-content-start my-16 px-16"> <div class="t1 flex flex-center font-32 w6:font-40 color-white bg-c-white-20 b-2-dashed-white rounded-4"> Parallax background </div> </div> </div> </div> </div> </div> </div>