What should be done to the boxes or cards which minmax value is 240px or 15rem, so that it fits the screen size below 308px media width. Its grid layout and fits well enough till 308px. It loses its responsivity in 308px.Link of the work is given below.

https://codepen.io/TA0011/pen/ZExJgmr Please guide me in this.

.container-a{
  margin:10px auto;
  padding:0;
  width: calc(100% - 6.25rem);
  position:relative;
}
.wrapper{
  height:100%;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
  grid-gap:10px;
}
.wrapper .blog-container{
  grid-area: blog-container;
  padding-right:10px;
    
}
.wrapper .blog-sidebar{
  grid-area: blog-sidebar;
}
.wrapper .blog-container span,
.wrapper .blog-sidebar span{
  background-color: #007bff;
    padding: 5px 10px;
    position:relative;
    color: #fff;
  z-index: -1;
  width: 3.5rem;
}
.blog-container hr,
.blog-sidebar hr{
    width: 100%;
    color:#007bff;
    margin-top: 4px;
    position: relative;
    z-index: -2;
}
.blog-container .blog-cards{
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem,1fr));
    grid-gap: 10px; 
}
.blog-cards .card{
  min-width:16.875 rem;
  flex:1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
    width: 100%;
    border: 1px solid #ccc;
    background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
    position: relative;
  text-align:center; 
}
.widgets{
    background: #fff;
    border:  1px solid #ccc;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
    grid-gap: 10px;
    padding:  5px;
}
.widgets img{
    width: 100%;
    float: none;
    display:block;
    object-fit: fill;
}
.widgets .card{
  min-width:16.875 rem;
  flex:1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
    width: 100%;
    border: 1px solid #ccc;
    background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
    position: relative;
  text-align:center; 
}
@media(max-width: 768px){
  .container-a{
    width:100%;
  }
  .wrapper{
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        grid-template-areas: "blog-container"
        "blog-sidebar";
    }
}

<section  aria-label="blog-content">
  <div >
    <div >
      <span>Content</span><hr>
      <div >
        <div >Card1</div>
        <div >Card2</div>
        <div >Card3</div>
        <div >Card4</div>
        <div >Card5</div>
      </div><!--cards-->
    </div> 
    <div >
      <span>Sidebar</span><hr>
      <div >
        <div >Card1</div>
        <div >Card2</div>
      </div>
    </div> 
  </div>
</section>

CodePudding user response：

Just make a media-query for max-width: 308px where you change the minmax-value of the grid-template-columns-property. I used 100% to ensure it doesn't overflow and padding-right: 0 on the container to align everything properly:

@media(max-width: 308px) {
  .wrapper .blog-container {
    padding-right: 0;
  }
  .blog-container .blog-cards {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  .widgets {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}

.container-a {
  margin: 10px auto;
  padding: 0;
  width: calc(100% - 6.25rem);
  position: relative;
}

.wrapper {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
  grid-gap: 10px;
}

.wrapper .blog-container {
  grid-area: blog-container;
  padding-right: 10px;
}

.wrapper .blog-sidebar {
  grid-area: blog-sidebar;
}

.wrapper .blog-container span,
.wrapper .blog-sidebar span {
  background-color: #007bff;
  padding: 5px 10px;
  position: relative;
  color: #fff;
  z-index: -1;
  width: 3.5rem;
}

.blog-container hr,
.blog-sidebar hr {
  width: 100%;
  color: #007bff;
  margin-top: 4px;
  position: relative;
  z-index: -2;
}

.blog-container .blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 10px;
}

.blog-cards .card {
  min-width: 16.875 rem;
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
  width: 100%;
  border: 1px solid #ccc;
  background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
  position: relative;
  text-align: center;
}

.widgets {
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-gap: 10px;
  padding: 5px;
}

.widgets img {
  width: 100%;
  float: none;
  display: block;
  object-fit: fill;
}

.widgets .card {
  min-width: 16.875 rem;
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
  width: 100%;
  border: 1px solid #ccc;
  background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
  position: relative;
  text-align: center;
}

@media(max-width: 768px) {
  .container-a {
    width: 100%;
  }
  .wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "blog-container" "blog-sidebar";
  }
}

@media(max-width: 308px) {
  .wrapper .blog-container {
    padding-right: 0;
  }
  .blog-container .blog-cards {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  .widgets {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}

<section  aria-label="blog-content">
  <div >
    <div >
      <span>Content</span>
      <hr>
      <div >
        <div >Card1</div>
        <div >Card2</div>
        <div >Card3</div>
        <div >Card4</div>
        <div >Card5</div>
      </div>
      <!--cards-->
    </div>
    <div >
      <span>Sidebar</span>
      <hr>
      <div >
        <div >Card1</div>
        <div >Card2</div>
      </div>
    </div>
  </div>
</section>