There are different ways to achieve this, but the way I handle it is to change the grid-template-columns property to just be 1fr. When the user is on a small screen, you can easily change the layout to be a column of data instead of a row. The grid-gap is simply the gap in between the columns. Using fractional units means that the columns will grow and shrink proportionally as the screen-size changes. I am using fractional units to set up the different column widths. You also want to set up the size of each column in the grid using grid-template-columns. ![]() In my example, this is done with the class term-grid. ![]() The important CSS is to add display: grid to the container that you want to be a grid. Ipsum dolor sit amet consectetur adipisicing Below is an example of what the HTML for one definition without Vue would look like. If I was not using Vue, each line of data would be repeated with its own grid. It consists of both unresponsive and responsive modules. CSS Grid Layout is a method designed for the two-dimensional layout of items with rows and columns. Please note that I’m using Vue.js to display the data and keep the html clean, but it is unrelated to the grid. Pure CSS is a free and open-source framework of CSS. Then I found the following 3 powerful properties/techniques in grid that completely changed my tune. The header section is a grid, and each line in the data section is a grid. In fact, I avoided it for several years and was a diehard flexbox fan. In this example I have two sections that are grids and use the same layout which is set up with the term-grid class. Simple Responsive Table Layout with CSS Grid by Lisa Catalano ( CodePen. These options may be necessary for big complex tables of lots of data, but if you are dealing with a simple table, I find that using CSS grid offers an elegant solution. ![]() Or you could set the table to scroll horizontally if the screen size is too small. One option is to hide some less important data as the screen size gets smaller, and then allow the user to expand the data somehow if they want to see everything. Making tables responsive to screen size has always been a bit an issue with no perfect solution for all situations.
0 Comments
Leave a Reply. |