ELL Homepage Top Layout

ELL Homepage grid layout.

by the_voder

HTML

<div id="ell-big-posts">
	<article>A</article>
	<article>B</article>
	<article>C</article>
	<article>D</article>
</div>

CSS

#ell-big-posts {
  position: relative;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  ;
}

#ell-big-posts article {
  position: relative;
  margin: 2px;
  border-radius: 20px 2px 20px 2px;
}

#ell-big-posts article:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  background-color: red;
}

#ell-big-posts article:nth-child(2) {
  background-color: green;
  grid-row: 1 / span 2;
}

#ell-big-posts article:nth-child(3) {
  background-color: blue;
}

#ell-big-posts article:nth-child(4) {
  background-color: yellow;
}