JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="logos-container">
  <div class="logo-cell"><img src="https://via.placeholder.com/150x150" /></div>
  <div class="logo-cell"><img src="https://via.placeholder.com/150x200" /></div>
  <div class="logo-cell"><img src="https://via.placeholder.com/150x100" /></div>
  <div class="logo-cell"><img src="https://via.placeholder.com/150x75" /></div>
</div>

SCSS

.logos-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 15px;
	margin: 0 auto;
  background-color: #2196F3;
	max-width: 600px;
  padding: 10px;
	
	&.large {
		grid-template-columns: auto auto auto auto;
		max-width: 800px;
	}
}

.logo-cell {
	display: flex;
	align-content: center;
	justify-content: center;
  text-align: center;
	
	img {
		display: block;
		margin: 0 auto;
		height: 125px;
		width: auto;
		line-height: 0;
	}
}





[role="landing"] {
	background: pink;
	width: 100%;
}