Início / coding / Perguntas / 79596950
Accepted
t.schoel
Asked: 2025-04-29 00:49:33 +0800 CST

É possível em uma grade CSS fazer com que as trilhas esquerda e direita sejam exatamente iguais, com tamanho mínimo e ainda dar espaço restante para a trilha do meio?

  • 772

Em uma linha de grade com três trilhas, gostaria que as trilhas esquerda e direita tivessem exatamente o mesmo tamanho, respeitando o maior conteúdo mínimo entre as duas, e que a trilha do meio ocupasse o espaço restante, independentemente do tamanho do seu conteúdo. O HTML+CSS a seguir ilustra o problema:

nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); */
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
<nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

grid-template-columns: 1fr auto 1fr;descreve bem o que eu quero alcançar, mas não funciona. Em vez disso, como 1fré essencialmente equivalente ao minmax(auto, 1fr)que outros já observaram em outros lugares, as trilhas de borda são reduzidas a 0 de largura e a trilha do meio ocupará todo o espaço. Algo como grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);produz um resultado um pouco melhor, mas também não é o que eu quero, porque reduzirá as bordas para min-content, o que é diferente para cada uma delas, ou seja, elas não terão a mesma largura.

css

3 respostas

  1. Best Answer

    Resposta curta: Não, isso não pode ser feito sem algumas concessões.

    O que você está pedindo não faz sentido, você quer que todas as três colunas preencham "o espaço restante", o que é impossível de calcular, pois você não especifica o "espaço ocupado".

    Basicamente, você quer dar uma noção de espaço ocupado para que o navegador possa calcular quanto oferecer aos outros.

    Opção 1: Limite o crescimento do centro e projete em torno disso. Ambas as bordas serão forçadas a ter o mesmo tamanho.

    nav {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 80%) 1fr;
  /* grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); */
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    Opção 2: Limite o quanto o meio pode crescer e minimize o tamanho das bordas para o conteúdo. As bordas corresponderão ao tamanho somente quando o meio não precisar de espaço, mas todo o conteúdo estará sempre visível.

    nav {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(auto, 80%) minmax(min-content, 1fr);
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    Opção 3: Defina o tamanho das bordas. O meio ocupará o espaço restante não ocupado pelas bordas.

    nav {
  display: grid;
  grid-template-columns: 10rem auto 10rem;
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    Opção 4: Coloque tudo em parâmetros flexíveis. Os tamanhos relativos serão sempre mantidos.

    nav {
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    Pode haver outra sintaxe para obter resultados semelhantes, como envolver col-span etc., mas essas são basicamente suas opções para construir sua grade logicamente.

    • 0

  2. expanda o elemento esquerdo ao máximo e use Javascript para obter a largura do elemento esquerdo e adicioná-lo ao elemento direito.

    <style>
  /* rest of your code  ... */

    .right {
        justify-self: end;
        width: 100% !important;

    }

    .left {
        justify-self: start;
        min-width:min-content;
    }
</style>

    JavaScript para alterar a largura. Você pode modificar e adicionar um ouvinte de eventos para eventos de redimensionamento.

    <script>
    let right = document.getElementsByClassName('right')[0];
    let left = document.getElementsByClassName('left')[0];
    right.style.minWidth = left.offsetWidth + 'px';
</script>
    • 0

  3. Não acho que seja possível fazer isso somente com CSS.

    Mas mesmo que fosse, eu não usaria esse design. Eu não tentaria fazer os lados esquerdo e direito iguais. Ficaria melhor se os trilhos esquerdo e direito tivessem cada um o tamanho necessário — isso resultaria em espaços iguais entre o trilho central e os dois trilhos laterais. Basta usar um flexbox com justify-content: space-between.

    insira a descrição da imagem aqui

    insira a descrição da imagem aqui

    nav {
  margin-top: 3em;
  display: flex;
  justify-content: space-between;
  gap: 3vw;
  background: green;
  color: white;
  align-items: center;
  overflow: hidden;
  padding: 0.5em 1em;
  
  h3 {
    margin: 0;
  }

  ul {
    margin: 0;
    display: flex;
    border: 1px solid white;
    border-radius: 4px;
    list-style: none;
    padding: 0;
    overflow: auto;

    li {
      padding: 8px 16px;
      white-space: nowrap;

      &:not(:last-child) {
        border-inline-end: 1px solid white;
      }
    }
  }
  
  .edge {
    white-space: nowrap;
  }
}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <ul class="box centre links">
    <li>First Link Item</li>
    <li>Second Link Item</li>
    <li>Third Link Item</li>
    <li>Fourth Link Item</li>
    <li>Fifth Link Item</li>
    <li>Sixth Link Item</li>
    <li>Seventh Link Item</li>
    <li>Eighth Link Item</li>
    <li>Ninth Link Item</li>
    <li>Tenth Link Item</li>
  </ul>
  
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    • 0

relate perguntas