How to code a checkerboard-like CSS grid website?

Question

How can I create a website with a layout like this and CSS grid?

My try:

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 10px;
}

article {
  grid-column-gap: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<article>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur?
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
</article>

Is it necessary to work with grid-row? If yes, how is it possible to do that in this specific case?

I would be very thankful for help!

Answer 1

If you want this specific example, it can be laid out by adding grid-row and grid-column values for each section. Just add the following code to your CSS:

section:nth-child(2) {
  grid-row: 2;
  grid-column: 2;
}
section:nth-child(3) {
  grid-row: 3;
}
section:nth-child(4) {
  grid-row: 3;
  grid-column: 3;
}
section:nth-child(5) {
  grid-row: 4;
  grid-column: 2;
}

Here is a Pen.

If you want a more generic solution, for a repeating checkerboard, for example, you can use the same approach but use :nth-of-type rather than :nth-child.

Answer 2

You can try like below:

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 10px;
}

article {
  grid-column-gap: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

article > :nth-child(3n + 1) {
  grid-column:1;
}
article > :nth-child(3n + 2) {
  grid-column:3;
}
article > :nth-child(3n + 3) {
  grid-column:2;
}

<article>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur?
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
  <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
   <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
   <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
   <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
   <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
   <section>
    Arunt moluptatusae eum voluptat qui aut provitat fuga. Nem vent. Id que nam assit qui blaccum quam quam, sequo molorem es cone eum ipiendusci odis ut faceatio doluptate volenti busdam inctat laboriaspic tora inctotatur? Pudit aliquos trumqui blaut aut
    que platio. Harunto essustem et volo te int is sequati nvelectat iunt veribus as dolut vendae nosapitem nus a nit, conserum que senia nus. Pudantiae verem excestibus et plit ma coriscit, conseque estio. Ut as nis ea sant, quo iliquaest est audipsam,
    in rehende volenis eum dem dolo quam, volupti asperumquam, conse intur, sus quis molorit offictur, oditatiumque coria de sum veliquiam esto etur reseditatur? Tur, sit remodigenis dellaboris dolori cusam volum volum que
  </section>
</article>