Title: HTML Widget Issue: Display Grid
Last modified: June 15, 2018

---

# HTML Widget Issue: Display Grid

 *  Resolved [bballard](https://wordpress.org/support/users/bballard/)
 * (@bballard)
 * [7 years, 12 months ago](https://wordpress.org/support/topic/html-widget-issue-display-grid/)
 * Hi All,
    I’m using the HTML widget to create a responsive grid, but for some 
   reason when I try to add an “auto-fit” style to the grid, it creates an extra
   blank cell at the beginning of the grid. Why is this? I haven’t been able to 
   get rid of it. The code runs perfectly when not in Elementor. Many thanks!
 *     ```
       <style>
        *{
           box-sizing: border-box;
       }
   
       body {
           background-color: #FFFFFF;
           padding: 20px;
           font-family: Arial;
       }
   
       /* Center website */
       .main {
           max-width: 100%;
           margin: auto;
       }
   
       /*Create responsive columns*/
       .row {
           margin: 10px -16px;
           /*display divs in a grid, and have the number of columns automatically change so the divs are always at least 300px wide */
           display: grid;
           grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
   
       }
   
       /* Add padding BETWEEN each column */
       .row,
       .row > .column {
           padding: 8px;
       }
   
       /* Style columns */
       .column {
       	float:left;
           display: none; /* Hide all elements by default */
       }
   
       /* Clear floats after rows */
       .row:after {
           content: "";
           display:table;
           clear: both;
       }
   
       /* Content */
       .content {
       	position: relative;
           background-color: #DCDCDC;
           padding: 10px;
           padding-right: 20px;
       }
   
       .text {
         color: white;
         font-size: 14px;
         position: absolute;
         top: 10%;
         left: 10%;
         right: 10%;
         /*old code
         top: 20%;
         left: 20%;
         transform: translate(-20%, -20%);
         -ms-transform: translate(-20%, -20%);
         */
         text-align: justify;
         line-height: 1.5
       }
   
       #clients {
           font-size: 22pt;
           font-family: Arial;
       }
   
       .overlay {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: rgba(110,193,228,0.83);
         overflow: hidden;
         width: 100%;
         height: 0;
         transition: .5s ease;
       }
   
       .content:hover .overlay {
         height: 100%;
       }
   
       /* The "show" class is added to the filtered elements */
       .show {
         display: block;
       }
       ```
   
    -  This topic was modified 7 years, 12 months ago by [bballard](https://wordpress.org/support/users/bballard/).
    -  This topic was modified 7 years, 12 months ago by [bballard](https://wordpress.org/support/users/bballard/).
    -  This topic was modified 7 years, 12 months ago by [bballard](https://wordpress.org/support/users/bballard/).
    -  This topic was modified 7 years, 12 months ago by [bballard](https://wordpress.org/support/users/bballard/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhtml-widget-issue-display-grid%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [benpines](https://wordpress.org/support/users/benpines/)
 * (@benpines)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/html-widget-issue-display-grid/#post-10546188)
 * Hi bballard
 * You should use the custom CSS feature available in Elementor Pro

Viewing 1 replies (of 1 total)

The topic ‘HTML Widget Issue: Display Grid’ is closed to new replies.

 * ![](https://ps.w.org/elementor/assets/icon-256x256.gif?rev=3444228)
 * [Elementor Website Builder - more than just a page builder](https://wordpress.org/plugins/elementor/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/elementor/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/elementor/)
 * [Active Topics](https://wordpress.org/support/plugin/elementor/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/elementor/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/elementor/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [benpines](https://wordpress.org/support/users/benpines/)
 * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/html-widget-issue-display-grid/#post-10546188)
 * Status: resolved