Responsive grid

grid.css

/*
see https://smolcss.dev/#smol-css-grid
*/

.smol-css-grid {
  --min: 15ch;
  --gap: 1rem;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}


/*
  See https://gomakethings.com/how-to-build-a-reusable-grid-system-with-css-grid/

  This creates a 12 column grid.
*/
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
	column-gap: 1em;
  margin-bottom: 2rem;
  border-bottom: 1px solid;
  padding-bottom: 2rem;
}

.col-half {
	grid-column: auto / span 6;
}

markup for the 12 column grid

This example is a 2 column layout, with 2 rows.

            <div class="row">
                <div class="col-half">
                    <p>content here</p>
                </div>

                <div class="col-half">
                  <p>content here</p>
                </div>
            </div>

            <div class="row">
                <div class="data col-half">
                    <p>
                      content here
                    </p>
                </div>

                <div class="status-section col-half">
                    <h3>half width section</h3>
                </div>
            </div>