Cannot replicate this layout

Forum|Forum|4 years ago
May 23, 2021
返信数 2.
374 ビュー

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>

このトピックへの返信は締め切られました。

解決に役立った回答 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_解決！

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.