<!-- Demo for justify-items article CSS Tricks by Mohit Khare(mohitkhare.com)  -->
<h2> Baseline Explanation in justify-items </h2>
<p style="text-align: center;"> Paragraph within grid aligns based on baseline </p>

<div class="container">
  <div class="first-baseline-col">
    <div> First Baseline property </div>
    <div> First Baseline property </div>
  </div>
  <div class="last-baseline-col">
    <div> Last Baseline property </div>
    <div> Last Baseline property </div>
  </div>
</div>
.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 1rem;
}

.first-baseline-col {
  width: 40%;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: first baseline;
  border: 1px solid red;
   padding: 1rem;
}

.last-baseline-col {
  width: 40%;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;  
  justify-items: last baseline;
  border: 1px solid green;
  padding: 1rem;
}

h2 {
  text-align: center;
  font-family: "Roboto", sans-serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.