Cannot replicate this layout

Report · May 23, 2021

Hello

I cannot replicate this layout at the first link after copying the code.

There is no 4 divs in a row but 2 rows and 2 columns instead. I resize the Firefox or Chrome window and there is now change. See what I copied in the code posted. I must be missing something....

https://codepen.io/robinrendle/pen/Npjzyz?editors=1100

From this article. The link is just above the animation. It works at codenpen but not when I copied it. https://css-tricks.com/getting-started-css-grid/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Layout</title>
  <style>
body,html {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: black;
  
  @media screen and (min-width: 500px){
    grid-template-columns: 1fr 1fr 1fr;
  }

  @media screen and (min-width: 800px){
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.letter {
  background-color: #0069b3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 70px;
  color: white;
  line-height: 1;
  font-family: 'hobeaux-rococeaux-background', Helvetica;
  font-weight: 200;
  cursor: pointer;
  transition: all .3s ease;
}
  </style>
</head>
<body>

<div class="wrapper">
  <div class="letter">
    A
  </div>
  <div class="letter">
    B
  </div>
  <div class="letter">
    C
  </div>
  <div class="letter">
    D
  </div>
</div>

</body>
</html>

Report · May 23, 2021

Pre-processor SCSS is not the same as final CSS code.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 23, 2021

Hello
I cannot replicate this layout at the first link after copying the code.
There is no 4 divs in a row but 2 rows and 2 columns instead. I resize the Firefox or Chrome window and there is now change. See what I copied in the code posted. I must be missing something....
https://codepen.io/robinrendle/pen/Npjzyz?editors=1100
From this article. The link is just above the animation. It works at codenpen but not when I copied it. https://css-tricks.com/getting-started-css-grid/

By @davidhelp

At Codepen there is a down arrow icon at the right side of the css panel window. If you click on that and choose 'View complied css' that is what you want, not the uncomplied (SCSS) version which codepen shows as default.

Report · May 23, 2021

Thanks again to all. Now it works : )

Cannot replicate this layout

2 Correct answers