0

With Auto sizing, I have noticed when I used auto-fill, Grid aligned to right. I have basic knowledge about Auto-sizing.

.wrapper-fill{
              display:grid;
              grid-template-columns: repeat(auto-fill, 300px);
              grid-template-areas: "header header header"
                                   "left-sidebar .. right-sidebar"
                                   "footer footer footer";
              grid-gap:10px;
}

First grid with auto-fit and in second grid just change grid-template-columns properties for auto-fill See the codepen

Is there any default setting or Am I doing anything wrong?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
monikapatelIT
  • 977
  • 14
  • 26
  • Hey and welcome to SO! You can help others help you by providing code examples that clearly illustrate what you have already tried and where you got stuck. This greatly increases the chance of a user being able to solve your particular problem. – MSB Jul 10 '18 at 02:23
  • @MSB I have already add codepen link that's got all code. should I add more then that ? – monikapatelIT Jul 10 '18 at 02:27
  • It is recommended to add at least the specific part of the code, that is centered around your problem, into the problem question. This also ensures people can still access the relevant information in the future. Further more, elaborating on what you tried, what that resulted in and how that was different from your expectation also helps users understand where and how to help you. – MSB Jul 10 '18 at 02:29
  • Added code get problem – monikapatelIT Jul 10 '18 at 03:53
  • thanks for elaborating the question. It looks to me that there is already an excellent answer to a similar question here: https://stackoverflow.com/questions/49514794/centering-grid-items-in-an-auto-fill-container The answer goes into great detail on how to get certain alignments to work and why they act that way. I hope that helps. – MSB Jul 10 '18 at 05:31
  • The `grid-template-areas` property is used to visually code a static layout. Using `auto-fill` and `auto-fit` in the `grid-template-columns` property are for **responsive** layouts. I'm pretty sure that they shouldn't be used together – Danield Jul 10 '18 at 13:22
  • I have taken out auto-fit but still, autofill stay in right : https://codepen.io/IamMonikaPatel/pen/XBrQvX – monikapatelIT Jul 10 '18 at 17:27
  • @monikapatel I meant that if you are using the `grid-template-areas` property, you probably want a static or fluid layout, as apposed to a responsive one. For example: `grid-template-columns: repeat(3, 1fr);` https://codepen.io/danield770/pen/XBJbBj – Danield Jul 11 '18 at 06:21

0 Answers0