Why Does Input's Size Increase in CSS Grid Layouts

Why does input's size increase in CSS Grid layouts?

1. Why does the label's and input's size match the grid's row height and fills it in?

Because height is auto, in CSS Grid auto is stretched. because of the default value stretch of the alignment properties align-items and justify-content, We can override this:

1. align-items:flex-start in the block axis (vertically)
2. justify-content:flex-start in the inline axis (horizontally)

[grid] {
  background: orange;
  display: inline-grid;
  grid-template-columns: 50px;
  grid-template-rows: 50px;
}

[grid]>div {
  background: red;
  height: auto;
}

[fix] {
  align-items: flex-start;
  justify-items: flex-start;
}

[grid]>[notAuto] {
  height: 30px;
  width: 30px;
}

<h4>align-items: stretch; justify-items: stretch; (default)</h4>
<div grid>
  <div>Text</div>
</div>

<h4>align-items: flex-start; justify-items: flex-start;</h4>
<div grid fix>
  <div>Text</div>
</div>

<h4>When width/height are specified (not auto)</h4>
<div grid>
  <div notAuto>Text</div>
</div>

CSS Grid is resizing input elements in IE11

You have justify-items: start in the container. That works for modern browsers (including Chrome). But notice there's no prefix for IE11.

That's because, as far as I can tell, it doesn't exist. Hence, justify-items: start isn't recognized by IE11.

However, such a function does exist at the grid item level. Add this to your code:

#testParms > :not(labelDiv) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-column-align: start; /* NEW */
}

This is the equivalent for justify-self: start, which you could also add to the item, if you wish. But you don't need to because it's covered already by justify-items on the container.

CSS Grid with input fields: alignment question

Nothing wrong that you are doing, but let me explain why this happens and the solution.

input elements have some css which the browser adds. like border, max-width and stuff. you need to get rid of those, for your inputs to follow your stylesheet strictly.

add this to the CSS for this to work like a charm:

* { /* all element selector */
  box-sizing: border-box; /* border, within the width of the element */
}
input {
  display: block;
  width: 100%
}   

if * {box-sizing: border-box; } looks new to you, you can remove the margin and border from input to get the perfect result.

 input {
  display: block;
  width: 100%;
  border: none;
  margin: 0;
} 

CSS grid columns changing size with long content

As @MichaelBenjamin said, it's related to the content of the body. When it exceed a certain size the calculation of the column size behave differently.

I will try to grab the detail of such calculation but a solution is to make sure the body doesn't contribute to the grid size calculation by using width:0;min-width:100%;

.stepper {
  display: grid;
  grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));
  row-gap: 8px;
  font-family: "Roboto", sans-serif;
}

.step {
  display: contents;
}

.step__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
  color: #fff;
  padding: 8px;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #fff;
}

.step__body {
  display: none;
  grid-row-start: 2;
  grid-column: span var(--steps-count);
  padding: 16px;
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
}

.step__content {
  display: none;
}

.step__header-text {
  width: 100%;
  text-align: center;
}

.step__header-title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.step__header-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 12px;
}

.step__header-indicator::after {
  content: ";
}

.step--selected {
  color: #fff;
}

.step--selected .step__header {
  background: purple;
}

.step--selected .step__body {
  display: block;
  background: purple;
}

.step--selected .step__content {
  display: block;
}

<div class="stepper" style="--steps-count: 4">
  <div class="step" style="--step-index: 0">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">Step 1</div>
        </div>
      </div>
    </div>

    <div class="step__body">
      <div class="step__content">Step body 1</div>
    </div>
  </div>

  <div class="step" style="--step-index: 1">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">Step 2</div>
        </div>
      </div>
    </div>
    <div class="step__body">
      <div class="step__content">Step body 2</div>
    </div>
  </div>

  <div class="step step--selected" style="--step-index: 2">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
    </div>
    <div class="step__body">
      <div class="step__content">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien arcu, imperdiet sed augue ut, rhoncus elementum urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id ultricies libero, ac interdum
          justo. Donec auctor quam in neque commodo, eget auctor turpis condimentum. Integer blandit urna vitae nisi bibendum luctus. Ut a laoreet purus, vel dictum nibh. Vestibulum non faucibus mi, eu tempor lectus. Mauris in varius lacus. Nullam pretium
          at felis nec pharetra. Suspendisse dui ex, ullamcorper ac scelerisque ut, fermentum at urna. Aliquam efficitur, leo et egestas convallis, sapien tortor tincidunt velit, a faucibus ligula dui ac eros. Nunc sed sagittis orci. Fusce quam est, convallis
          ac commodo eget, tincidunt non erat.</div>
      </div>
    </div>
  </div>

  <div class="step" style="--step-index: 3">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">Step 4</div>
        </div>
      </div>
    </div>
    <div class="step__body">
      <div class="step__content">Step body 4</div>
    </div>
  </div>
</div>

Why does the size of my input box increase when I start typing

Ignore my comments i didn't go through everything properly :3

I'll try to explain why this is happening for future readers, It may not be 100% accurate.

I didn't even notice you had padding:5% Which is the main problem. Specifically the relative unit %.

---

First the issue doesn't have anything to with justify-content: center;

[grid] {  border: 5px solid red;  display: inline-grid;}
input {  padding: 5%;}

<div grid>  <input type="text"></div>

CSS Grid changes track size when nested grid changes size

Actually I don't have an accurate explanation but this is due to the computation of min-content. Instead of it you can use the combination of 1fr and auto

let e = document.getElementById('e')let heightInput = document.querySelector('#controls input')heightInput.addEventListener('input', function() { e.style.height = heightInput.value + 'px'})

html, body {  width: 100%;  height: 100%;  padding: 0;  margin: 0;}
#controls {  height: 25px;  padding: 5px;}
#grid {  background: orange;    width: 100%;  height: calc(100% - 35px);    display: grid;  grid-template-columns: min-content min-content auto;  grid-template-rows: 1fr auto; /* updated this */  grid-template-areas:    'a b de'    'c c de';}
#a {  background: red;    grid-area: a;  width: 30px;}
#b {  background: blue;    grid-area: b;  width: 30px;}
#c {  background: green;    grid-area: c;}
#de {  background: purple;    grid-area: de;
  display: grid;  grid-template-rows: 1fr auto;  /* updated this too but not mandatory */  grid-template-areas:    'd'    'e';}
#d {  background: grey;    grid-area: d;}
#e {  background: yellow;    grid-area: e;  height: 30px;}

<body>  <div id="controls">    Set height of e in px <input type="number" value="30" />  </div>  <div id="grid">    <div id="a">a</div>    <div id="b">b</div>    <div id="c">c</div>    <div id="de">      <div id="d">d</div>      <div id="e">e</div>    </div>  </div></body>

Input field not adjusting to desired width

Personally, I think this would much easier to achieve without @media queries, using display: grid instead. Designing around so many width breakpoints can get really hairy, esp. when there is a more elegant solution.

For example:

*{
  font-size: 3vmin;
}
header{
  display: grid;
  grid-template:  1fr / 1fr 2fr 1fr 1fr 1fr;
}
h3{
  align-self: center;
  justify-self: center;
}

<header>
  <button>search</button>
  <input type="search"/>
  <button>icon</button>
  <button>icon 2</button>
  <h3>name here</h3>
</header>

input type=text grid items are shrinking when centered with grid properties

Hopefully this is what your looking for.

   *{
    box-sizing: border-box; 
}

#container {
    
    width: 90%;
    margin: auto;
    background: silver;
    padding: 20px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "header"
    "content"
    "footer";

    justify-items: center;
}
#header {
    text-align: center;
    grid-area: header;
}

#survey-form {
    
    width: 70%;
    background: blue;
    padding: 30px;

    grid-area: content;
    display: grid;

}

.form-group {
    margin:auto;
    width:90%;
}

.form-group label{
display: block;
color:white;
}

.form-group input[type="text"],.form-group input[type="email"] {
    width: 100%;
    height: 30px;
    margin:auto;
    border-radius: 10px;

}

<!DOCTYPE html>
<htmL>
<head>
    <title>Survey Page</title>
    <link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>

<body>
    <div id="container">
        <header id="header">
            <h1 id="title">Take this survey</h1>
            <p id="description">Seriously just take it now while I think about the caption.</p>
        </header>

        <form id="survey-form">

        <div class="form-group">
            <label id="name-label" for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
        </div>

        <div class="form-group">
            <label id="email-label" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
        </div>

        <div class="form-group">
            <label id="number-label" for="number">Age</label>
            <input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
        </div>

        <footer>
            
        </footer>

        </form>
    </div>

How to stop input and div items overflowing out of a CSS grid column?

The problem: The input elements are overflowing the grid boundaries.

There are some settings for border etc and their widths will add to the width taken up, but if the default box-sizing is used then they will be extra to the element's width.

To get them counted in as part of the width put this at the top of your CSS

* {
box-sizing: border-box;
}

(of course, put it more locally to just the calculator if there is other code that relies on the default setting).

---

Related Topics