How to adjust columns' relative width based on content?

user_2711395 0
Viewed 63

I am using a css grid to render a menu with two main columns.

I want the second column to be 25% if the first column has much content, and up to 33% if the first column has little content.

Now I'm using grid-template-columns: 3fr minmax(33rem, 1fr) and columns are fixed.

Below I've added fiddles for the two cases.

a.toggle-menu {
  width: 9rem;
  font-size: 1.5rem;
  color: white;
  background-color: #359558;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 3rem;
}


/*#endregion */

.overlay {
  /* x animazione
    visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;*/
  display: none;
  width: 100%;
  position: absolute;
  z-index: 2;
  top: 5.4rem;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  /*    a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;

    &:hover, &:focus {
        color: #f1f1f1;
    }
  }*/
}

.overlay.menu-aperto {
  /* x animazione
    visibility: visible;
  opacity: 1;*/
  display: block;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.overlay .overlay-content {
  position: relative;
  width: 100%;
  padding: 2rem 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 3fr minmax(33rem, 1fr);
}

.overlay .overlay-content #main-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
}

.overlay .overlay-content #main-menu .voce-menu {
  cursor: pointer;
}

.overlay .overlay-content #main-menu .voce-menu:hover {
  transition: 0.6s;
  background-color: #e5680b;
  color: white !important;
}

.overlay .overlay-content #main-menu .voce-menu:hover h2,
.overlay .overlay-content #main-menu .voce-menu:hover p {
  color: white;
}

.overlay .overlay-content #side-menu {
  border-style: solid;
  border-width: 0px 0px 0px 1px;
  border-color: #359558;
}

.overlay .overlay-content #side-menu h1 {
  color: #359558;
}

.overlay .overlay-content #side-menu .categoria-menu {
  margin: 1rem;
}

.overlay .overlay-content #side-menu a {
  color: #359558;
}

.overlay .overlay-content .categoria-menu {
  margin: 1rem 3rem;
  min-width: 30rem;
}

.overlay .overlay-content .categoria-menu h1 {
  align-items: center;
  display: flex;
  padding: 1rem;
  font-size: 2rem;
  color: #e5680b;
  text-transform: uppercase;
}

.overlay .overlay-content .categoria-menu h1::before {
  margin-right: 1rem;
  font-size: 4rem;
}

.overlay .overlay-content .categoria-menu .voce-menu {
  padding: 1rem;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #DDDDDD;
}

.overlay .overlay-content .categoria-menu .voce-menu-img {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  grid-template-areas: "img titolo" "img desc";
  column-gap: 1rem;
  align-items: center;
  padding: 1.5rem 1rem;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #DDDDDD;
}

.overlay .overlay-content .categoria-menu .voce-menu-img img {
  width: 100%;
  grid-area: img;
}

.overlay .overlay-content .categoria-menu .voce-menu-img h2 {
  grid-area: titolo;
}

.overlay .overlay-content .categoria-menu .voce-menu-img p {
  grid-area: desc;
}

.overlay .overlay-content .categoria-menu h2 {
  font-size: 1.6rem;
  margin: 0 0 0.5rem 0;
  font-weight: normal;
  line-height: 2rem;
  color: #22262C;
  /*&::first-letter {
        font-size: 3rem;
        padding-right: 1px;
    }*/
}

.overlay .overlay-content .categoria-menu p {
  font-weight: normal;
  color: #7F8595;
  font-size: 1.3rem;
  line-height: 1.7rem;
  margin: 0;
}
<div id="myNav" class="overlay menu-aperto">
  <div class="overlay-content">
    <section id="main-menu">
      <section class="categoria-menu">
        <h1 class="fa btn-menu-abil">Abilitazioni</h1>

        <div class="voce-menu" data-url="/">
          <h2>Organico</h2>
          <p>Elenco del personale</p>
        </div>

        <div class="voce-menu" data-url="/Abilitazioni">
          <h2>Abilitazioni</h2>
          <p>Catalogo dei codici abilitativi</p>
        </div>

        <div class="voce-menu" data-url="/ContrassegnoSAP">
          <h2>Contrassegni </h2>
          <p>Imposta la segreteria dei sdfsdf</p>
        </div>

        <div class="voce-menu" data-url="/Corredino">
          <h2>redfd</h2>
          <p>Gestione dei </p>
        </div>
      </section>



    </section>
    <section id="side-menu">
      <section class="categoria-menu">
        <h1 class="fas btn-menu-supporto">Supporto</h1>
        <div class="voce-menu-img">
          <img src="/imetodo.jpg">
          <h2>Assistenza metodologica</h2>
          <p>
            Corsi interni <a href="mailto:indirizzo@email.com">metodologia</a> <br> Corsi esterni <a href="mailto:indirizzo@email.com">segreteria</a> <br>
          </p>
        </div>
        <div class="voce-menu-img">
          <img src="">
          <h2>Assistenza tecnica</h2>
          <p>
            <a href="d">Segnala un'anomalia</a>
            <br>
            <a href="o">Richiedi un'implementazione</a>
          </p>
        </div>
      </section>
      <section class="categoria-menu">
        <div class="voce-menu">
          <h2>Informazioni sulla versione</h2>
          <p>Versione applicazione 3.1.0</p>
          <p>Versione database </p>
        </div>
      </section>
    </section>
  </div>
</div>

a.toggle-menu {
  width: 9rem;
  font-size: 1.5rem;
  color: white;
  background-color: #359558;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 3rem;
}


/*#endregion */

.overlay {
  /* x animazione
    visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;*/
  display: none;
  width: 100%;
  position: absolute;
  z-index: 2;
  top: 5.4rem;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  /*    a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;

    &:hover, &:focus {
        color: #f1f1f1;
    }
  }*/
}

.overlay.menu-aperto {
  /* x animazione
    visibility: visible;
  opacity: 1;*/
  display: block;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.overlay .overlay-content {
  position: relative;
  width: 100%;
  padding: 2rem 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 3fr minmax(33rem, 1fr);
}

.overlay .overlay-content #main-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
}

.overlay .overlay-content #main-menu .voce-menu {
  cursor: pointer;
}

.overlay .overlay-content #main-menu .voce-menu:hover {
  transition: 0.6s;
  background-color: #e5680b;
  color: white !important;
}

.overlay .overlay-content #main-menu .voce-menu:hover h2,
.overlay .overlay-content #main-menu .voce-menu:hover p {
  color: white;
}

.overlay .overlay-content #side-menu {
  border-style: solid;
  border-width: 0px 0px 0px 1px;
  border-color: #359558;
}

.overlay .overlay-content #side-menu h1 {
  color: #359558;
}

.overlay .overlay-content #side-menu .categoria-menu {
  margin: 1rem;
}

.overlay .overlay-content #side-menu a {
  color: #359558;
}

.overlay .overlay-content .categoria-menu {
  margin: 1rem 3rem;
  min-width: 30rem;
}

.overlay .overlay-content .categoria-menu h1 {
  align-items: center;
  display: flex;
  padding: 1rem;
  font-size: 2rem;
  color: #e5680b;
  text-transform: uppercase;
}

.overlay .overlay-content .categoria-menu h1::before {
  margin-right: 1rem;
  font-size: 4rem;
}

.overlay .overlay-content .categoria-menu .voce-menu {
  padding: 1rem;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #DDDDDD;
}

.overlay .overlay-content .categoria-menu .voce-menu-img {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  grid-template-areas: "img titolo" "img desc";
  column-gap: 1rem;
  align-items: center;
  padding: 1.5rem 1rem;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #DDDDDD;
}

.overlay .overlay-content .categoria-menu .voce-menu-img img {
  width: 100%;
  grid-area: img;
}

.overlay .overlay-content .categoria-menu .voce-menu-img h2 {
  grid-area: titolo;
}

.overlay .overlay-content .categoria-menu .voce-menu-img p {
  grid-area: desc;
}

.overlay .overlay-content .categoria-menu h2 {
  font-size: 1.6rem;
  margin: 0 0 0.5rem 0;
  font-weight: normal;
  line-height: 2rem;
  color: #22262C;
  /*&::first-letter {
        font-size: 3rem;
        padding-right: 1px;
    }*/
}

.overlay .overlay-content .categoria-menu p {
  font-weight: normal;
  color: #7F8595;
  font-size: 1.3rem;
  line-height: 1.7rem;
  margin: 0;
}
<div id="myNav" class="overlay menu-aperto">
  <div class="overlay-content">
    <section id="main-menu">
      <section class="categoria-menu">
        <h1 class="fa btn-menu-abil">Abilitazioni</h1>

        <div class="voce-menu" data-url="/">
          <h2>Organico</h2>
          <p>Elenco del personale</p>
        </div>

        <div class="voce-menu" data-url="/Abilitazioni">
          <h2>Abilitazioni</h2>
          <p>Catalogo dei codici abilitativi</p>
        </div>

        <div class="voce-menu" data-url="/ContrassegnoSAP">
          <h2>Contrassegni SAP</h2>
          <p>Imposta la segreteria dei contrassegni</p>
        </div>

        <div class="voce-menu" data-url="/Corredino">
          <h2>Corredini</h2>
          <p>Gestione dei corredini</p>
        </div>
      </section>
      <section class="categoria-menu">
        <h1 class="fas btn-menu-corsi">Corsi</h1>

        <div class="voce-menu" data-url="/PartecipazioneCorso/Crea">
          <h2>Richiesta</h2>
          <p>Iscriviti ad un corso</p>
        </div>

        <div class="voce-menu" data-url="/PartecipazioneCorso">
          <h2>Partecipazioni</h2>
          <p>Consulta l'elenco delle tue richieste e partecipazioni</p>
        </div>

        <div class="voce-menu" data-url="/Corso">
          <h2>Catalogo</h2>
          <p>Gestione del catalogo dei corsi</p>
        </div>

        <div class="voce-menu" data-url="/Corso/InvioMails">
          <h2>Mail</h2>
          <p>Invia le mail riepilogative dei corsi</p>
        </div>
      </section>
      <section class="categoria-menu">
        <h1 class="fa btn-menu-giustificativi">Giustificativi</h1>

        <section class="voce-menu" data-url="/Giustificativo">
          <h2>Elenco giustificativi</h2>
          <p>Consulta i giustificativi mancanti, il catalogo di quelli ricevuti e invia i solleciti</p>
        </section>
      </section>
      <section class="categoria-menu">
        <h1 class="fa btn-menu-config">Amministrazione</h1>

        <div class="voce-menu" data-url="/Anagrafiche">
          <h2>Anagrafiche</h2>
          <p>Gestione delle anagrafiche</p>
        </div>

        <div class="voce-menu" data-url="/Setup">
          <h2>Setup</h2>
          <p>Configura l'applicazione</p>
        </div>
      </section>
    </section>
    <section id="side-menu">
      <section class="categoria-menu">
        <h1 class="fas btn-menu-supporto">Supporto</h1>
        <div class="voce-menu-img">
          <img src="/images/menu-aiuto-metodo.jpg">
          <h2>Assistenza metodologica</h2>
          <p>
            Corsi interni <a href="mailto:indirizzo@email.com">metodologia</a> <br> Corsi esterni <a href="mailto:indirizzo@email.com">segreteria</a> <br>
          </p>
        </div>
        <div class="voce-menu-img">
          <img src="/images/menu-aiuto-tecnico.jpg">
          <h2>Assistenza tecnica</h2>
          <p>
            <a href="fghfghf">Segnala un'anomalia</a>
            <br>
            <a href="fghfghgf">Richiedi un'implementazione</a>
          </p>
        </div>
      </section>
      <section class="categoria-menu">
        <div class="voce-menu">
          <h2>Informazioni sulla versione</h2>
          <p>Versione applicazione 3.1.0</p>
          <p>Versione database </p>
        </div>
      </section>
    </section>
  </div>
</div>

css-grid css
2 Answers

Since you posted 1 month ago, you have maybe found the answer or change the way to do what you wanted.

But for people who come across this page and want something like this:

           Column 1            Column 2
+--------------------------+-------------+
| Not so much text         |             |
|                          |             |
|<-----------67%---------->|<----33%---->| Row 1
|                          |             |
|                          |             |
+--------------------------+-------------+

           Column 1            Column 2
+------------------------------+---------+
| Lot of text in this little   |         |
| row need more space...       |         |
|<-------------75%------------>|<--25%-->| Row 1
|                              |         |
|                              |         |
+------------------------------+---------+

This is the right columns template:

grid-template-columns: minmax(66%, max-content) minmax(25%, 1fr);

Check the code snippet below : 

#wrapper {
  display: grid;
  grid-template-columns: minmax(66%, max-content) minmax(25%, 1fr);
}

.col1 {
  background-color: blue;
}
.col2 {
  background-color: red;
}
<div id="wrapper">
  <div class="col1">Lorem ipsum</div> 
  <div class="col2">B</div>
</div>
<br/>
<div id="wrapper">
  <div class="col1">Lorem ipsum dolor sit ametconsectetur adipiscing elit. Fusce moLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie erat a commodo scelerisque. Vivamus convallis vestibulum elit ut pulvinar. Praesent elementum nisl ipsum, porta porttitor neque facilisis non. Sed tempus nulla nec sollicitudin ultricies. In sit amet odio ac nunc sodales faucibus a eget lectus. Suspendisse urna libero, tristique eu egestas nec, lacinia ut sem. Nulla ut pharetra erat. Curabitur eget sagittis dolor. Maecenas nisl mauris, sodales in dignissim a, egestas quis nibh. Curabitur nunc quam, congue vel sollicitudin at, tristique et mauris. Fusce accumsan nisl ex, et ultricies massa dictum ac. Curabitur dapibus ligula ac massa rutrum mattis. Nulla malesuada imperdiet purus sed placerat. </div> 
  <div class="col2">B</div>
</div>

Also working with nested grids

enter image description here

#wrapper {
  display: grid;
  grid-template-columns: minmax(66%, max-content) minmax(25%, 1fr);
}

#wrapper2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.col1 {
  background-color: blue;
}
.col2 {
  background-color: red;
}
.col3 {
  background-color: yellow;
}
.col4 {
  background-color: green;
}
<div id="wrapper">
  <div class="col1">Lorem ipsum</div> 
  <div class="col2">B</div>
</div>
<br/>
<div id="wrapper">
  <div id="wrapper2">
    <div class="col3">Lorem ipsum</div> 
    <div class="col4">4</div>
  </div>
  <div class="col2">B</div>
</div>
<br/>
<div id="wrapper">
  <div id="wrapper2">
    <div class="col3">Sed condimentum ullamcorper mollis. Nullam suscipit pretium justo id interdum. Aliquam non commodo sapien, sit amet tincidunt purus. Curabitur nec quam quis massa imperdiet tristique at sollicitudin sem. Donec vehicula magna vel sapien elementum, et malesuada justo laoreet. Sed sapien arcu, finibus nec molestie id, mollis a mauris. Donec ultrices iaculis odio, at ornare enim pharetra id. Mauris et leo rutrum, vestibulum sapien sit amet, scelerisque odio. Nulla facilisi. Aliquam aliquet orci a arcu imperdiet volutpat. Vivamus dolor sapien, venenatis a enim eget, condimentum mattis mi. Nam tincidunt dolor augue, sed faucibus dolor vulputate at. Aliquam ac viverra odio.</div> 
    <div class="col4">4</div>
  </div>
  <div class="col2">B</div>
</div>
<br/>
<div id="wrapper">
  <div class="col1">Lorem ipsum dolor sit ametconsectetur adipiscing elit. Fusce moLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie erat a commodo scelerisque. Vivamus convallis vestibulum elit ut pulvinar. Praesent elementum nisl ipsum, porta porttitor neque facilisis non. Sed tempus nulla nec sollicitudin ultricies. In sit amet odio ac nunc sodales faucibus a eget lectus. Suspendisse urna libero, tristique eu egestas nec, lacinia ut sem. Nulla ut pharetra erat. Curabitur eget sagittis dolor. Maecenas nisl mauris, sodales in dignissim a, egestas quis nibh. Curabitur nunc quam, congue vel sollicitudin at, tristique et mauris. Fusce accumsan nisl ex, et ultricies massa dictum ac. Curabitur dapibus ligula ac massa rutrum mattis. Nulla malesuada imperdiet purus sed placerat. </div> 
  <div class="col2">B</div>
</div>

user_107977180

i solved it with this css

grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
user_27113950
Related