I created two sets of CSS classes for general purpose use in my web app. They are .modal and .two-cols-one-one. The purpose of the .modal is obvious so I won't explain it here. The purpose of .two-cols-one-one is to create a two-column equal width grid layout i.e. 1fr each.

Both the .modal and .two-cols-one-one classes seem to work fine except when I use .two-cols-one-one inside a modal AND shrink the screen size. Then it seems to fall apart -- see image below. When the screen size is larger or even as small as a smart phone size, it actually works fine. It seems to fall apart at a resolution between 900px and 1200px. These are rough numbers, just what I think they maybe when the modal starts to fall apart.

It's important to note that if I do NOT use the .two-cols-one-one class inside the modal and put some text in just a regular <div> or <p>, it seems to work fine and scale up and down without any problems at any screen resolution.

Here's what it looks like when the screen width is within that range:

Here's all the relevant code. I'd appreciate it if someone can point out where I'm making a mistake. Thanks.

.modal {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: flex;
   background: rgba(77, 77, 77, .7);
   align-items: center;
   justify-content: center;
   transition: all ease-in-out .4s;
}

.modal:target {
   visibility: visible;
   opacity: 1;
 }

 .show-modal {
   visibility: visible;
   opacity: 1;
 }
 
 .modal-body-md {
   display: grid;
   border-radius: 4px;
   position: relative;
   width: 35%;
   min-width: 25em;
   background: #171111;
   grid-template-rows: 2rem 1fr auto;
   grid-template-areas:
      "modal-header"
      "modal-content"
      "modal-footer";
   filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
}

.modal-header {
   grid-area: modal-header;
   display: inline;
   position: absolute;
   width: 100%;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   background-image: linear-gradient(90deg, #DD4746, #421C27);
   color: #FFF;
   font-size: 0.8rem;
   font-weight: 700;
   text-transform: uppercase;
   text-align: start;
   padding: 0.5em 1.5em;
}

.modal-content {
   grid-area: modal-content;
   padding: 1em 1.2em;
 }
 
.modal-footer {
   grid-area: modal-footer;
   text-align: right;
   font-size: 0.6rem;
   padding: 1em 2em;
 }

.modal-close {
   position: absolute;
   top: 0.6em;
   right: 0.75em;
   width: 14px;
   height: 14px;
   background-color: #DD4746;
   color: #FFF;
   border-radius: 50%;
   text-decoration: none;
   padding: 0.1em 0.2em 0.25em 0.35em;
   font-size: 0.8rem;
   font-weight: 700;
   cursor: pointer;

   &:hover {
      background-color: #A71836;
   }
 }
 
 .two-cols-one-one {
   display: grid;
   padding: 0;
   margin: auto;
   width: 100%;
   grid-gap: 1.5rem;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
      "col-left col-right";
   transition: grid-template-columns 0.3s ease;

   @media (max-width: 900px) {
      grid-template-columns: 1fr;
      grid-template-areas:
         "col-left"
         "col-right";
   }
}

.col-left {
   grid-area: col-left;
   width: 100%;
   height: 100%;
   padding: 0;
}

.col-right {
   grid-area: col-right;
   width: 100%;
   height: 100%;
   padding: 0;
}

.form-field {
   display: grid;
   justify-content: start;
   align-items: start;
   padding: 0.3em 0.5em;
}

.form-field label {
   justify-content: inherit;
   align-items: inherit;
   margin-left: 0.7em;
   margin-bottom: 0.3em;
   font-family: inherit;
   font-size: 0.5rem;
   font-weight: 700;
   text-transform: uppercase;
}

.form-field input select {
   justify-content: inherit;
   align-items: inherit;
}

.form-field button {
   position: absolute;
   margin-top: 2em;
   justify-self: end;
}

input {
   background-color: #333;
   color: #FFF;
   font-family: "PT Sans";
   font-size: 0.8rem;
   letter-spacing: 0.1rem;
   min-width: 20em;
   border: 1px solid #421C27;
   border-radius: 15px;
   line-height: 1em;
   padding: 0.3em 3.5em 0.3em 1em;
}

<div>
   <div><a href="#demo-modal">Open Modal</a></div>
   <div id="demo-modal" class="modal">
            <div class="modal-body-md">
               <div class="modal-header">
                  <span>Entry Form</span>
                  <span>
                     <a href="#" class="modal-info">&nbsp;</a>
                     <a href="#" class="modal-close">&nbsp;</a>   
                  </span>
                  <a href="#" class="modal-close">&nbsp;</a>
               </div>
               <div class="modal-content">
                  <div class="two-cols-one-one">
                     <div class="col-left">
                        <div class="form-field">
                           <label>Name</label>
                           <input />
                        </div>
                        <div class="form-field">
                           <label>Address</label>
                           <input />
                        </div>
                     </div>
                     <div class="col-right">
                        <div class="form-field">
                           <label>State</label>
                           <input />
                        </div>
                        <div class="form-field">
                           <button>Submit</button>
                        </div>
                     </div>
                  </div>
               </div>

               <div class="modal-footer">
                  
               </div>

            </div>
         </div>
</div>

I created two sets of CSS classes for general purpose use in my web app. They are .modal and .two-cols-one-one. The purpose of the .modal is obvious so I won't explain it here. The purpose of .two-cols-one-one is to create a two-column equal width grid layout i.e. 1fr each.

Both the .modal and .two-cols-one-one classes seem to work fine except when I use .two-cols-one-one inside a modal AND shrink the screen size. Then it seems to fall apart -- see image below. When the screen size is larger or even as small as a smart phone size, it actually works fine. It seems to fall apart at a resolution between 900px and 1200px. These are rough numbers, just what I think they maybe when the modal starts to fall apart.

It's important to note that if I do NOT use the .two-cols-one-one class inside the modal and put some text in just a regular <div> or <p>, it seems to work fine and scale up and down without any problems at any screen resolution.

Here's what it looks like when the screen width is within that range:

Here's all the relevant code. I'd appreciate it if someone can point out where I'm making a mistake. Thanks.

.modal {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: flex;
   background: rgba(77, 77, 77, .7);
   align-items: center;
   justify-content: center;
   transition: all ease-in-out .4s;
}

.modal:target {
   visibility: visible;
   opacity: 1;
 }

 .show-modal {
   visibility: visible;
   opacity: 1;
 }
 
 .modal-body-md {
   display: grid;
   border-radius: 4px;
   position: relative;
   width: 35%;
   min-width: 25em;
   background: #171111;
   grid-template-rows: 2rem 1fr auto;
   grid-template-areas:
      "modal-header"
      "modal-content"
      "modal-footer";
   filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
}

.modal-header {
   grid-area: modal-header;
   display: inline;
   position: absolute;
   width: 100%;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   background-image: linear-gradient(90deg, #DD4746, #421C27);
   color: #FFF;
   font-size: 0.8rem;
   font-weight: 700;
   text-transform: uppercase;
   text-align: start;
   padding: 0.5em 1.5em;
}

.modal-content {
   grid-area: modal-content;
   padding: 1em 1.2em;
 }
 
.modal-footer {
   grid-area: modal-footer;
   text-align: right;
   font-size: 0.6rem;
   padding: 1em 2em;
 }

.modal-close {
   position: absolute;
   top: 0.6em;
   right: 0.75em;
   width: 14px;
   height: 14px;
   background-color: #DD4746;
   color: #FFF;
   border-radius: 50%;
   text-decoration: none;
   padding: 0.1em 0.2em 0.25em 0.35em;
   font-size: 0.8rem;
   font-weight: 700;
   cursor: pointer;

   &:hover {
      background-color: #A71836;
   }
 }
 
 .two-cols-one-one {
   display: grid;
   padding: 0;
   margin: auto;
   width: 100%;
   grid-gap: 1.5rem;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
      "col-left col-right";
   transition: grid-template-columns 0.3s ease;

   @media (max-width: 900px) {
      grid-template-columns: 1fr;
      grid-template-areas:
         "col-left"
         "col-right";
   }
}

.col-left {
   grid-area: col-left;
   width: 100%;
   height: 100%;
   padding: 0;
}

.col-right {
   grid-area: col-right;
   width: 100%;
   height: 100%;
   padding: 0;
}

.form-field {
   display: grid;
   justify-content: start;
   align-items: start;
   padding: 0.3em 0.5em;
}

.form-field label {
   justify-content: inherit;
   align-items: inherit;
   margin-left: 0.7em;
   margin-bottom: 0.3em;
   font-family: inherit;
   font-size: 0.5rem;
   font-weight: 700;
   text-transform: uppercase;
}

.form-field input select {
   justify-content: inherit;
   align-items: inherit;
}

.form-field button {
   position: absolute;
   margin-top: 2em;
   justify-self: end;
}

input {
   background-color: #333;
   color: #FFF;
   font-family: "PT Sans";
   font-size: 0.8rem;
   letter-spacing: 0.1rem;
   min-width: 20em;
   border: 1px solid #421C27;
   border-radius: 15px;
   line-height: 1em;
   padding: 0.3em 3.5em 0.3em 1em;
}

<div>
   <div><a href="#demo-modal">Open Modal</a></div>
   <div id="demo-modal" class="modal">
            <div class="modal-body-md">
               <div class="modal-header">
                  <span>Entry Form</span>
                  <span>
                     <a href="#" class="modal-info">&nbsp;</a>
                     <a href="#" class="modal-close">&nbsp;</a>   
                  </span>
                  <a href="#" class="modal-close">&nbsp;</a>
               </div>
               <div class="modal-content">
                  <div class="two-cols-one-one">
                     <div class="col-left">
                        <div class="form-field">
                           <label>Name</label>
                           <input />
                        </div>
                        <div class="form-field">
                           <label>Address</label>
                           <input />
                        </div>
                     </div>
                     <div class="col-right">
                        <div class="form-field">
                           <label>State</label>
                           <input />
                        </div>
                        <div class="form-field">
                           <button>Submit</button>
                        </div>
                     </div>
                  </div>
               </div>

               <div class="modal-footer">
                  
               </div>

            </div>
         </div>
</div>

P.S. I tried to provide only the necessary CSS classes here and even in this example you can see how the modal falls apart.

UPDATE:

I tried using .two-cols-one-one inside my .modal without using form fields and it seems to work fine. It also scaled up and down nicely -- see image below:

So, the issue maybe related to .form-field here.

• html
• css
• css-grid

1 Answer 1

The main idea behind responsive grids is to set a fluid container width, and let the grid worry about the number of columns.

To do so, I had to clear most of your grid, position:absolute, width, min-width code (the inputs), and the media query.

I've also set the .modal-body-md to fit the screen's width:

width: 40vw;
min-width: min-content;

Lastly set grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); on the .two-cols-one-on. This would limit the number of columns to 1-2, and allow them to grow and shrink.

*,
*::before,
*::after {
  box-sizing: border-box;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  inset: 0;
  display: flex;
  background: rgba(77, 77, 77, .7);
  align-items: center;
  justify-content: center;
  transition: all ease-in-out .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.show-modal {
  visibility: visible;
  opacity: 1;
}

.modal-body-md {
  width: 40vw;
  min-width: min-content;
  border-radius: 4px;
  position: relative;
  background: #171111;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
}

.modal-header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-image: linear-gradient(90deg, #DD4746, #421C27);
  color: #FFF;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: start;
  padding: 0.5em 1.5em;
}

.modal-content {
  padding: 1em 1.2em;
}

.modal-footer {
  text-align: right;
  font-size: 0.6rem;
  padding: 1em 2em;
}

.modal-close {
  position: absolute;
  top: 0.6em;
  right: 0.75em;
  width: 14px;
  height: 14px;
  background-color: #DD4746;
  color: #FFF;
  border-radius: 50%;
  text-decoration: none;
  padding: 0.1em 0.2em 0.25em 0.35em;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;

  &:hover {
    background-color: #A71836;
  }
}

.two-cols-one-one {
  display: grid;
  padding: 0;
  margin: auto;
  gap: 1.5rem;

  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
}

.form-field {
  padding: 0.3em 0.5em;
}

.form-field label {
  color: white;
  margin-left: 0.7em;
  margin-bottom: 0.3em;
  font-family: inherit;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.form-field button {
  margin-top: 2em;
  justify-self: end;
}

input {
  width: 100%;
  
  background-color: #333;
  color: #FFF;
  font-family: "PT Sans";
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  border: 1px solid #421C27;
  border-radius: 15px;
  line-height: 1em;
  padding: 0.3em 3.5em 0.3em 1em;
}

<div>
  <div><a href="#demo-modal">Open Modal</a></div>
  <div id="demo-modal" class="modal">
    <div class="modal-body-md">
      <div class="modal-header">
        <span>Entry Form</span>
        <span>
           <a href="#" class="modal-info">&nbsp;</a>
           <a href="#" class="modal-close">&nbsp;</a>   
        </span>
        <a href="#" class="modal-close">&nbsp;</a>
      </div>
      <div class="modal-content">
        <div class="two-cols-one-one">
          <div class="col-left">
            <div class="form-field">
              <label>Name</label>
              <input />
            </div>
            <div class="form-field">
              <label>Address</label>
              <input />
            </div>
          </div>
          <div class="col-right">
            <div class="form-field">
              <label>State</label>
              <input />
            </div>
            <div class="form-field">
              <button>Submit</button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">

      </div>

    </div>
  </div>
</div>