Cannot replicate this layout

Forum|Forum|4 years ago
May 23, 2021
2 replies
360 views

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>

This topic has been closed for replies.

Correct answer osgood_

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.

O

osgood_Correct answer

Legend

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.