0

I can't seem to find any information about my issue on CSS Grid. This is the line I believe makes grid-template-columns: repeat(auto-fill, minmax(300px, 1.5fr));. I used Autoprefixer but it doesn't fix the issue.

Do you have any ideas on this?

There is the whole css on that component:

.subservices__content {
  list-style: none;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1.5fr));
  grid-auto-rows: 400px;
  grid-gap: 20px;

              <ul className='landing-page__tabs'>
                  {categories.map(category => (
                    <Link to={`/produktai/${category.id}`} className='landing-page__tab' key={category.id}>
                      <li>
                        <div className='tab-content'>
                          <img
                            src={category.acf.image.pirma ? category.acf.image.pirma : undefined}
                            alt={category.name}
                          />
                          <p>{category.name}</p>
                        </div>
                      </li>
                    </Link>
                  ))}
                </ul>
Gvidas Pranauskas
  • 109
  • 1
  • 8
  • Which version of IE ? .. oldest IE did not implement auto-fill , and you need to set the grid/row position to each elements, else they all end up stacking int the first grid cell – G-Cyrillus Feb 06 '20 at 20:22
  • Have you been through this post? https://stackoverflow.com/q/45786788/3597276 – Michael Benjamin Feb 06 '20 at 20:34
  • @Michael_B I have been through that posts and I didn't find or didn't understand anything that might be useful. – Gvidas Pranauskas Feb 06 '20 at 21:10
  • @G-Cyr At least IE11, but if possible, later versions too. What do you mean by saying grid/row position to each element? Maybe you have some examples? – Gvidas Pranauskas Feb 06 '20 at 21:10
  • see that answer from the link given earlier : https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-ie11-even-with-prefixes#49772313 – G-Cyrillus Feb 06 '20 at 22:34
  • But what if I use React for my front-end and get all the data from API? I am not able to know how much items will I have. – Gvidas Pranauskas Feb 06 '20 at 22:48
  • 1
    then you need to rethink the use of grid or exclude IE with an alternative probably via https://caniuse.com/#search=%40supports basicly : `.myGrid {/* rules to be overwritten if @support & grid are implemented */} @supports (display:grid) { .myGrid{ /* here the style sheet for the grid rules that IE11 is not supposed to see */}}`. – G-Cyrillus Feb 06 '20 at 23:58
  • [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#Browser_compatibility) and [`grid-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap#Browser_compatibility) are not supported in IE. Also `grid-auto-rows` should be `-ms-grid-rows` in IE 11. But the real situation depends on your code. It is better if you also provide the html code related to make a minimal, reproducible sample. And you can also find information about the issue in IE 11 using F12 dev tools DOM tab. You can inspect the element styles and check if they're applied correctly. – Yu Zhou Feb 07 '20 at 07:23
  • @YuZhou I used IE dev tools and the styles aren't applied. I added my component to post if that helps. – Gvidas Pranauskas Feb 07 '20 at 19:49
  • Just as G-Cyr says, IE11 requires us to specify the exact row and column for each element when we use CSS grid in IE. If you can obtain the number of the items, then I think you could try to use SASS to applied the grid style to each item like [this thread](https://stackoverflow.com/questions/59056584/css-grid-auto-rows-in-ie11). If you don't know the numbers I think you'd better to use flex or other styles in IE 11. – Yu Zhou Feb 10 '20 at 09:07

0 Answers0