Search code examples
htmlcsslayoutcss-grid

CSS Grid, Horizontal Spacing of Columns: min-content does not seem to do what I expect

I've been reading and reading and I'm still stuck understanding how and why min-content seems to fail me in this example.

I have the following HTML (snipped from one project and simplified to the point of a good example):

<div class="lo_buttons">
        <div class="lo_reload_icon">
            <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
        </div>

        <div class="lo_reload">
            <button type="button" class="button_left" id="btnReload">
                <img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
            </button>
        </div>

        <div class="lo_shortcuts">
          <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>

        <div class="lo_space">
        </div>

        <div class="lo_utils">
          <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
        </div>  
</div>

and the following CSS:

.lo_buttons {
    grid-area: lo_buttons; 
    display: grid;
    grid-template-columns: min-content;
    grid-auto-rows: min-content min-content min-content 1fr min-content;
    grid-column-gap: 5px;
    grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
    white-space: nowrap !important;
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
    float: left; 
    margin-right: 0.5em;
    margin-bottom: 5px;
}

.button_right { 
    float: right; 
    margin-left: 0.5em;
    margin-bottom: 5px;
}

which is all on codepen at:

https://codepen.io/bernd-wechner/pen/NWPwOXP

(where I can play with it)

The puzzle I have is that I'd like group of buttons number 1 2 3 4 snug against the tick icon to its left. The div the icon is in, is min-content yet consumes far more space than the icon in it. What am I missing here? And why does min-content not keep that grid cell as wide asd the icon in it?

Solution

  • You are using grid-auto-rows where it should be grid-template-columns and it should be max-content not min-content since min-content will get the minimum width considering line-break and I suppose you want the button to remain on the same row.

    .lo_buttons {
	grid-area: lo_buttons; 
	display: grid;
	grid-auto-columns: min-content; /* maybe auto-columns here ?*/
	grid-template-columns: max-content max-content max-content 1fr max-content;
	grid-column-gap: 5px;
	grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
	/*white-space: nowrap !important; useless*/
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
	float: left; 
	margin-right: 0.5em;
	margin-bottom: 5px;
}

.button_right { 
	float: right; 
	margin-left: 0.5em;
	margin-bottom: 5px;
}
    <div class="lo_buttons">
		<div class="lo_reload_icon">
			<img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
		</div>
		
		<div class="lo_reload">
			<button type="button" class="button_left" id="btnReload">
				<img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
			</button>
		</div>
			
		<div class="lo_shortcuts">
		  <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>
			
		<div class="lo_space">
		</div>

		<div class="lo_utils">
		  <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
		</div>	
	</div>

    I see you were also trying to use white-space:nowrap but it will only work if you remove float and in this case you can keep min-content because it will give you the same result as max-content since we disabled the line break

    .lo_buttons {
	grid-area: lo_buttons; 
	display: grid;
	grid-auto-columns: min-content; /* maybe auto-columns here ?*/
	grid-template-columns: min-content min-content min-content 1fr min-content;
	grid-column-gap: 5px;
	grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
	white-space: nowrap ;
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
	margin-bottom: 5px;
}

.button_right { 
	margin-bottom: 5px;
}
    <div class="lo_buttons">
		<div class="lo_reload_icon">
			<img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
		</div>
		
		<div class="lo_reload">
			<button type="button" class="button_left" id="btnReload">
				<img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
			</button>
		</div>
			
		<div class="lo_shortcuts">
		  <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>
			
		<div class="lo_space">
		</div>

		<div class="lo_utils">
		  <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
		</div>	
	</div>