My parent flex element has several child elements (flex and grid mixed). I can't use "auto-fit" and "minmax()" properties in the "grid-template-columns" rule in the child grid element.

grid-template-columns: repeat(auto-fit, minmax(min(9em, 100%), 1fr));

I made a simplified version of what I have on my working project:

    https://codepen.io/georgiigalechyan/pen/GRByVYe

You need to look at elements with "wrapper" and "menu" classes. Pay attention to the comments in the code.

In the reply I want an explanation why it doesn't work (preferably a link to the documentation). And I will be thankful if you will offer me your version of code, keeping original idea of using "auto-fit" and "minmax()" (if it's possible).

CodePudding user response：

Try this

grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));

CodePudding user response：

You need to explain to us why you want to use auto-fit and minmax(). Your header looks pretty good with just grid-template-columns: repeat(3, 1fr);.

* {
  box-sizing: border-box;
}

button {
  height: 40px;
  color: #fff;
  border: 1.5px solid #fff;
  background-color: transparent;
}

.header {
  width: 100%;
  height: fit-content;
  background-color: #1b1b1b;
}

.wrapper {
  width: 1080px;
  margin: 0 auto;
  display: flex;  
  justify-content: space-between;
  align-items: center; 
  
}

.logo {
  width: 40px;
  font-size: 1.5em;
}

.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
/*
  grid-template-columns: repeat(3, minmax(min(9em, 100%), 1fr));
  grid-template-columns: repeat(auto-fit, 1fr );
  grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(min(9em, 100%), 1fr));
*/
}

.menu-item {
  padding: 0px 1.5ch;
  font-size: 1.2em;
  letter-spacing: .035em;
  transition: all ease-in-out 150ms;
}

.menu-item:hover {
  background-color: #30ba8f;
}

.change-theme-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.change-theme-buttons > button {
  width: 40px;
  height: 40px;
  transition: all ease-in-out 150ms;
}

.change-theme-buttons > button:hover {
  background-color: lightgray;
  color: #000;
  font-size: 1.2em;
} 

.change-theme-buttons :nth-child(1) {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-right: 0px;
}

.change-theme-buttons :nth-child(2) {
  border-radius: 0px;
}

.change-theme-buttons :nth-child(3) {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-left: 0px;
}

.search {
  position: relative;
}

.search-input {
  height: 32px;
  padding: 4px 15px;
  background-color: transparent;
  border: 1.5px solid #fff;
  border-radius: 15px;
  color: #fff;
  font-size: 16px;
}

.search-input::placeholder {
  color: red;
  padding: 5px;
  border: 1.5px solid white;
  border-radius: 15px;
  font-size: 16px;
}

.search-svg {
  display: none;
}

<header >
  <wrapper > <!-- parent flex element -->
    
    <button >L</button>
        
    <menu > <!-- children grid element (auto-fit not working)-->
      <button >About</button>
      <button >Technology</button>
      <button >Blog</button>
    </menu>
    
    <div >
      <button>D</button>
      <button>L</button>
      <button>S</button>
    </div>
    <div >
      <input  type="search" />
      <svg ></svg>
    </div>
  </wrapper>
</header>