1

.wrapper{
  display: grid;
  grid-template-columns: minmax(200px, 7fr) 4.4fr;
  grid-column-gap: 64px;
}
.block{
  background: red;
  height: 100px;
}
<div class="wrapper">
  <div class='block block-1'></div>
  <div class='block block-2'></div>
</div>

I have a simple css grid here with two columns but it doesn't work in IE 11

Can I get this working in IE ?

cdmt
  • 685
  • 4
  • 12
  • 23
  • IE doesn't really understand grid. It understands a simple version with named areas only, but to be honest: I never got it to work satisfying enough for any real project. So try use flexbox for IE – cloned Jul 29 '20 at 11:56
  • How can I do this with flex box just for IE – cdmt Jul 29 '20 at 11:58
  • If you want nice layout that looks like a grid, use frex along with the flex-wrap: wrap rule. And size your containers exactly. If you need help, please contact. – s.kuznetsov Jul 29 '20 at 11:59
  • Does this answer your question? [CSS Grid Layout not working in IE11 even with prefixes](https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-ie11-even-with-prefixes) – Yury Tarabanko Jul 29 '20 at 12:01

1 Answers1

1

Here's a flex example. Every odd block will be 55% wide, and even ones will be 35% wide.

.wrapper {
  display: flex;
  justify-content: space-between;
}

.block {
  background-color: red;
  height: 100px;
}

.block:nth-child(odd) {
  width: 55%;
}

.block:nth-child(even) {
  width: 35%;
}
<div class="wrapper">
  <div class='block'></div>
  <div class='block'></div>
</div>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25