css - Prevent line breaks in grid columns

Question

I training by create the Google Homepage and I have an issue on the footer which has a line break in 2 columns.

#footer{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
    grid-template-rows: 50px;
    grid-template-areas: 
        "pub entreprise propos comment neutre infos confidentialite conditions parametres";
    background-color: rgb(242, 242, 242);
}

 <div id="footer">
       <a href="#" id="pub">Publicité</a>
       <a href="#" id="entreprise">Entreprise</a>
       <a href="#" id="propos">A propos</a>
       <a href="#" id="comment">Comment fonctionne la recherche Google ?</a>
       <a href="#" id="neutre">Neutre en carbone depuis 2007</a>
       <a href="#" id="infos">Infos consommateurs</a>
       <a href="#" id="confidentialite">Confidentialité</a>
       <a href="#" id="conditions">Conditions</a>
       <a href="#" id="parametres">Paramètres</a>

question from:https://stackoverflow.com/questions/65905851/prevent-line-breaks-in-grid-columns

Answer 1

You can add a white-space : nowrap and not use grid-template-columns to enforce fitting of text within fraction of screen. But also you will have to take care of the responsive behaviour when width decreases. If that's not the requirement then this shall work. Maybe on shrinking of screen use a media query to have 2 rows instead of just one.

#footer {
  display: grid;
  grid-template-rows: 50px;
  grid-template-areas: "pub entreprise propos comment neutre infos confidentialite conditions parametres";
  background-color: rgb(242, 242, 242);
  white-space: nowrap;
}

<div id="footer">
  <a href="#" id="pub">Publicité</a>
  <a href="#" id="entreprise">Entreprise</a>
  <a href="#" id="propos">A propos</a>
  <a href="#" id="comment">Comment fonctionne la recherche Google ?</a>
  <a href="#" id="neutre">Neutre en carbone depuis 2007</a>
  <a href="#" id="infos">Infos consommateurs</a>
  <a href="#" id="confidentialite">Confidentialité</a>
  <a href="#" id="conditions">Conditions</a>
  <a href="#" id="parametres">Paramètres</a>