Added: 10th of April 2020
Updated On: 3rd of October 2020
Viewed: 1038 times
If you have ever tried to code a row of responsive boxes in CSS, you understand the difficulty of trying to create the right balance between the amount of characters entered and making the sure the height of the boxes remain uniformed.
You can set a fixed height in CSS using height: (x)px;, but then you need to limit the amount of characters entered in to each box.
You can also use overflow:hidden;, which expands each box individually depending on the amount of characters entered, but if the boxes wrap to the next line they lose alignment messing up your design.
To solve this problem with can use CSS grids. The simple script below outputs 8 equally spaced boxes using different sizes of text. The boxes fit any screen size including mobile.
You can view the demo script on the link below.
Copy and paste the code below for your own projects. The code below displays 3 boxes in a row, then continues on the next line.
Other Tips & Tutorials
CSSCSS keyframes animation, move text around the screen in a square path
Posted: 2nd of June 2021
CSSCSS animation, rotate image 90 degrees using transform rotate
Posted: 20th of May 2021
CSSAlternating div background colours using CSS
Posted: 9th of April 2021
CSSHow I created rounded boxes in the early days of the web using HTML tables, .gifs and Photoshop
Posted: 6th of March 2021
CSSUsing CSS grids to create a simple grid layout
Posted: 10th of April 2020
CSSSimple CSS responsive menu for websites and mobile devices
Posted: 26th of January 2016