A 9 square grid.
CSS Layout Generator
A grid.
3 horizontal lines.
3 vertical lines.
A horizontal line with the height highlighted.
A vertical line with the width highlighted.
A grid with the horizontal gaps highlighted.
A grid with the vertical gaps highlighted.
1
2
3
4
5
6
7
8
9

CSS

.layout {

  width: 100%;



  display: grid;

  grid-template-rows: repeat(3, 1fr);

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}

HTML

<section class="layout">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

  <div>9</div>

</section>