CODEWITHSUNDEEP
htmlcsscss-grid
Nightcrawler
Nightcrawler

Reputation: 1051

Css Grid-template-area does not works in browser

i am going to create responsive css grid layout, for dekstop screensize i want five divs, its works fine, but with responsive size i want div rows like picture below, i tried this, i can't focus on this... i am new in web development...

.first{
  grid-area: sys1;  
  width: 180px;
  height: 170px;
}

.second{
    grid-area: sys2;
    width: 180px;
height: 170px;
}
.third{

    grid-area: sys3;
}
.fourth{
    grid-area: sys4;
    width: 180px;
height: 170px;
}
.fifth{
    grid-area: sys5;
    width: 180px;
height: 170px;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(1, 100%);
    grid-template-areas: "sys1 sys2 sys3 sys4  sys5";
}
@media(max-width:600px){
    .grid-container {
        display: grid;
        grid-template-columns: repeat(1,100%);
        grid-template-rows: 40px 4em 40px;
          grid-template-areas: "sys1 sys2"
                                     "sys3 sys3"
                                      "sys4 sys5"
                            }
}

  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href='./css/slider.css'>
    </head>
    <body>



        <div class="grid-container">
          <div class="first">1</div>
          <div class="second">2</div>
          <div class="third">3</div>  
          <div class="fourth">4</div>
          <div class="fifth">5</div>

      </div>

          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
          <script>
 </script>
</body>
</html>

enter image description here

this snippet works fine here, but in chrome browser it does not works, only shows five div..

Upvotes: 1

Views: 128

Answers (1)

Fareed Khan
Fareed Khan

Reputation: 2923

If you are new to web development and want to jump directly to create Responsive layouts for your website then I will recommend you to start working with bootstrap instead of writing down your own css it will help you a lot.

I have converted your code in bootstrap and it is responsive. If your resize your screen it will shrink to your requested output as mentioned in your image but with much lesser code this is the power of bootstrap.

The css is just to give height to each div

.col-md-2,
.col-6 {
  height: 200px;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



<div class="container-fluid mt-4">
  <div class="row justify-content-center">
    <div class="col-md-2 col-6 bg-primary">
      <h1>1</h1>
    </div>
    <div class="col-md-2 col-6 bg-dark">
      <h1>2</h1>
    </div>
    <div class="col-md-2 col-12 bg-success">
      <h1>3</h1>
    </div>
    <div class="col-md-2 col-6 bg-danger">
      <h1>4</h1>
    </div>
    <div class="col-md-2 col-6 bg-secondary">
      <h1>5</h1>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions