How to fit text container width dynamically according to screen size using CSS ? - GeeksforGeeks

12 Feb, 2021
In this article, we have given a text paragraph and the task is to fit the text width dynamically according to screen size using HTML and CSS. Some of the important properties used in the code are as follows-
display-grid: It helps us to display the content on the page in the grid structure.
grid-gap: This property sets the minimum amount of gap between two grids.
auto-fit: It takes the required constraints and fits the content according to the size of the screen.
<div>: It is the division tag and helps us to define a particular section of the HTML code so that it can be referred to and edited easily later in the CSS style sheet.
auto-fit: It makes all the available columns on the screen fit into the available space and expand them as needed to occupy the rows.
min() and max() function: This function is very much related to the mathematical function which defines a particular range of the function i.e. greater than or equal to min and less than or equal to max.
@media(min-width): It is a CSS property where the condition under this tag is only applied when the minimum screen width reaches 950px.
Example 1: It is a simple example. Here, we will use the <div> tag to specify each quote separately and repeat function in the CSS part.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <style>        body {            margin: 0;            font-family: 'Nunito';        }                  .top {            padding: 3em;            display: grid;            grid-gap: 3em;            grid-template-columns: repeat(4, 250px);            .quote {                padding: 3em;                border-radius: .3em;                box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);                p {                    margin-top: 0;                }                span {                    font-weight: bold;                    position: relative;                    margin-left: 20px;                    &:before {                        content: '';                        position: absolute;                        height: 1px;                        width: 20px;                        border-bottom: 1px solid black;                        top: 20px;                    }                }            }        }                  @media(min-width:950px) {            .top {                grid-template-columns: repeat(4, 1fr);            }        }    </style>  </head>  <body>    <div class="top">        <div class="quote">              <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <br>            <span>GFG</span>        </div>        <div class="quote span-2">              <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <br>            <span>GFG</span>        </div>          <div class="quote">            <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <span>GFG</span>        </div>          <div class="quote">            <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <span>GFG</span>        </div>    </div></body>  </html>
Output:
Upon minimizing the output screen we are unable to see half of the text of the second row and are getting a scroll bar at the bottom of the window to scroll through. This doesn’t look nice and can cause trouble if the user is viewing the website on their mobile phone.
Example 2: This is a better approach as it gives us a more organized and hassle-free output with the addition of just one property known as auto fit. 
HTML
<!DOCTYPE html><!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">          <style>        body {            margin: 0;            font-family: 'Nunito';        }                  .top {            padding: 3em;            display: grid;            grid-gap: 2em;            grid-template-columns: repeat(                    auto-fit, minmax(250px, 1fr));              .quote {                padding: 2em;                border-radius: .3em;                box-shadow: 10px 10px 30px                         rgba(0, 0, 0, 0.1);                p {                    margin-top: 0;                }                span {                    font-weight: bold;                    position: relative;                    margin-left: 15px;                    &:before {                        content: '';                        position: absolute;                        height: 1px;                        width: 10px;                        border-bottom: 1px solid black;                        top: 10px;                        left: -15px;                    }                }            }        }    </style></head>  <body>    <div class="top">        <div class="quote">            <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <br>            <span>GFG</span>        </div>          <div class="quote span-2">            <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <br>            <span>GFG</span>        </div>          <div class="quote">            <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <span>GFG</span>        </div>          <div class="quote">            <p>                With the idea of imparting programming                 knowledge, Mr. Sandeep Jain, an IIT                 Roorkee alumnus started a dream,                 GeeksforGeeks. Whether programming                 excites you or you feel stifled, wondering                how to prepare for interview questions or                how to ace data structures and algorithms,                GeeksforGeeks is a one-stop solution. With                 every tick of time, we are adding arrows                in our quiver. From articles on various                 computer science subjects to programming                 problems for practice, from basic to                 premium courses, from technologies to                 entrance examinations, we have been                 building ample content with superior quality.            </p>            <span>GFG</span>        </div>    </div>  </body>  </html>
Output: 
In this method, we can see that upon minimizing the screen all the rows are adjusted as columns one below the other. And we are given a vertical scroll bar for the last quote. Here no text is omitted from a line and we are able to read the whole quote.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Questions
HTML-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to fetch data from localserver database and display on HTML table using PHP ?
How to Insert Form Data into Database using PHP ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
Form validation using HTML and JavaScript