WordPress Grids

The following is a page that has been added simply to show the code and output of part of a WordPress tutorial on Custom Themes.

These is both a CSS Grid and a Flexbox Grid system you can use for your WordPress layout as an example for your Custom WordPress theme.
You don't have to use Grids. You can use <elements> and selector <ids> or just basic css classes to make up your Custom theme layout.

But again. These are powerful yet core basic as you can get to show you examples of the possibilities of making your own WordPress theme.

For more about my core custom WordPress theme tutorial go here >

Let's start with the code first followed by the output:

CSS

  .wrapper {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ; 
}
 .box {
     background-color: #D3D3D3;
     border: .1rem solid #999;
     color: #fff;
     border-radius: 5px;
     padding: 20px;
     font-size: 150%;
}

/* main layout code */
/* This is your layout built in simple alphabet A-Z : If you wanted you could change to numbers or something more sematic like <header> <main> etc */
/* then just change the column or row span */
 .HEADER {
    grid-column: auto / span 2;
}
 .b {
    grid-column: auto / span 2;
}
 .c {
    grid-column: auto / span 2;
    grid-row: auto / span 4;
}
 .d {
    grid-column: auto / span 2;
    grid-row: auto / span 4;
}
 .e {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
}
 .f {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
}
 .g {
    grid-column: auto / span 2;
}
 
 .o {
    grid-column: auto / span 6;
    grid-row: auto / span 3;
}
/* main layout code */

 @media (max-width: 750px) {
     .wrapper {
         display: grid;
         grid-gap: 10px;
         grid-template-columns: repeat(auto-fill, minmax(10px, 1fr) ) ;
    }
     .box {
     background-color: #D3D3D3;
     border: .1rem solid #999;
     color: #fff;
     border-radius: 5px;
     padding: 5px;
     font-size: 150%;
    }
}
/* your media columns could easily be output based on the viewpoint threshold above - currently they fold to one but you can change this */ 

---

body HTML

<div class="wrapper">
<div class="box HEADER">A HEADER</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
<div class="box o">O</div>
</div>

Will get you this CSS GRID LAYOUT ^
For a closer look go to the codepen.io project file >

---

---

<div class="flexgrid">
<div class="column">Col 1</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
<div class="column">Col 5</div>
<div class="column">Col 6</div>
</div>
<div class="flexgrid">
<div class="bigger column">Col 1</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="column">Col 1</div>
<div class="bigger column">Col 2</div>
<div class="column">Col 3</div>
</div>
<div class="flexgrid halves"><!-- "halves" -->
<br>
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
</div>
<div class="flexgrid thirds"><!-- "thirds" -->
<br>
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
<div class="column">Col 5</div>
<div class="column">Col 6</div>
</div>
<div class="flexgrid fourths"><!-- "fourths" -->
<br>
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
<div class="column">Col 5</div>
<div class="column">Col 6</div>
<div class="column">Col 7</div>
<div class="column">Col 8</div>
</div>
<br> <br> <br>
<div class="flexgrid">
<div class="column">
<div class="grid">
<div class="column">A</div>
<div class="column">B</div>
<div class="column">C</div>
<br>
</div>
</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="column">
<div class="grid fourths"><!-- "Fourths" -->
<br>
<div class="column">A</div>
<div class="column">B</div>
<div class="column">C</div>
<div class="column">D</div>
<div class="column">E</div>
<div class="column">F</div>
<div class="column">G</div>
<div class="column">H</div>
<br>
</div>
</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="bigger column">Content</div>
<div class="column">happy little sidebar
<br>
<div class="flexgrid halves">
<div class="column">G</div>
<div class="column">R</div>
<div class="column">I</div>
<div class="column">D</div>
<br>
</div>
</div>
</div>