CSS-grid column organization-CodePudding

I am creating a div in css with two elements split into two columns. My goal is to have one element be two-thirds of the page, and another to be a third. The columns will also collapse when the page size reaches a certain minimum width, and have each element take up the entire width of the page.

When I use the following:

grid-template-columns: repeat(auto-fill,minmax(570px,1fr));

CSS divides the two elements into equal size columns which collapse under 570 px

When I attempt to resize the first column to be larger:

grid-template-columns: minmax(570px,1fr) 1fr;

neither column is responsive to the page, and do not collapse under any size. Instead the page can go over the elements and cover them.

How can I allow for the responsive page without the repeat function causing both grid elements to be of equal size?

CodePudding user response：

I don't know much about css grid. But I use to take help from css tricks grid guide. I hope this could help you. https://css-tricks.com/snippets/css/complete-guide-grid/#aa-properties-for-the-parentgrid-container

CodePudding user response：

You can use grid-template-columns: 2fr 1fr; here to easily resize them as there is only two div. Then use media-query for the desired screen size and change the grid-template columns to 1fr 1fr

.parent{
  display: grid;
  grid-template-columns: 2fr 1fr; /* 1st child: 66.66% 2nd child: 33.33% */
  gap: 1rem;
}
.child{
  height: 20px;
  background: red;
}

@media(min-width: 1000px){ /* use min-width/max-width with your prefered size */
  .parent{
    grid-template-columns: 1fr 1fr; /* 1st child: 50% 2nd child: 50% */
  }
}

<div >
  <div >Child one</div>
  <div >Child two</div>
</div>