Tips for expanding text within a grid

Question

Tips for expanding text within a grid

While working on an auto-fill grid that moves elements to the next line when the width reaches 800px, I encountered an issue with my text inside the grid not stretching.

https://i.sstatic.net/OeJ3I.png

Below is my CSS code:

   ul {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
       grid-template-rows: auto;
       justify-content: center;
       align-items: center;
       text-align: center;
                
        li {
            margin: 0 10px;
            list-style-type: none;
            cursor: pointer;
            border: 1px solid black;
            border-radius: 10px;
             adding: 5px;
            }
         }

After making some updates:

I discovered that using auto-fit could partially solve my problem,

yet, I am interested in having only [New one] and [Test two] stretch to fit one line. This way, these buttons can expand to multiple lines if there are too many of them.

https://i.sstatic.net/E0Jqz.png

html css

Answer 1

Answer №1

Swap out auto-fit with this alternative.

ul {
  display: grid;
  max-width: 800px;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-template-rows: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #aaa;
  padding: 0;
}

li {
  margin: 0 10px;
  list-style-type: none;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
}

<ul>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
</ul>

Alternatively, consider using float instead of grid.

ul {
  max-width: 800px;
  text-align: center;
  background-color: #aaa;
  padding: 0;
}

li {
  float: left;
  margin: 0 10px;
  list-style-type: none;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  width: fit-content;
}

<ul>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
</ul>

Answer 2

Swap out auto-fit with this alternative.

ul {
  display: grid;
  max-width: 800px;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-template-rows: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #aaa;
  padding: 0;
}

li {
  margin: 0 10px;
  list-style-type: none;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
}

<ul>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
</ul>

Alternatively, consider using float instead of grid.

ul {
  max-width: 800px;
  text-align: center;
  background-color: #aaa;
  padding: 0;
}

li {
  float: left;
  margin: 0 10px;
  list-style-type: none;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  width: fit-content;
}

<ul>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
</ul>

Tips for expanding text within a grid

Answer №1

Similar questions

Positioning Arrows Adjacent to Definitions

Placing an icon and a title on the same baseline

What is the best way to align navigation arrows vertically?

Slippery carousel: Showcase all items in center alignment mode

Is Webkit's Overflow Scrolling feature hiding the divs on your website?

I have implemented an email validation form in Angular, however, if the validation is not properly handled, the data will still be stored. How

What techniques can I use to merge alpha channels with compositing in images?

How to perfectly center a dropdown menu using CSS across different web browsers

I am facing an issue where my simple three.js code is not displaying properly

Children can easily access multiple items within a list by using the ul tag

Awesome C# PDF Printing Solution [closed]

Adjust the background color of the dropdown when toggled

Show two <p>'s next to each other

Tips for opening local HTML files on iPhones and Android devices

Tips for extracting an XML value from an API

Issue with continuous loader malfunction

Can someone explain why the min-width property is not being respected by the <input> element?

AngularJS is used to vertically collapse three different div elements. This feature

When working with NodeJS and an HTML form, I encountered an issue where the 'Endpoint'

Passing references using a personalized component