I have been using ChatGPT to create mostly CSS Grid Column Template expressions. I.e. the bit to enter into the Source Grid Column Definition (Advanced).
Not only does this work very well but it also adds an additional explanation of what it creates.
E.g. If you want to use CSS Grid to centre some text on a page and use the width of the text to underline or fill with a background colour that does not extend beyond the width of the text,
You could ask: create a css grid column template with 3 columns, where the centre column is sized to the content
Certainly! Here’s an example CSS grid column template where the center column is sized to the content:
.grid-container { display: grid; grid-template-columns: 1fr auto 1fr; }
In this example, the grid container has three columns. The 1fr value for the first and third columns means they will take up an equal share of the available space in the grid container. The auto value for the center column will size it based on the content it contains.
or in the following example, I also wanted the text to be between 300-400px wide
You could ask: create a css grid column template with 3 columns, where the centre column is sized to the content with a minimum value of 300px and a maximum value of 400px
The answer you get back is:
Sure, here’s an example CSS grid column template that meets your requirements:
.grid-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) minmax(0, 1fr); }
In this example, the grid container has three columns, with the centre column set to a minimum width of 300 pixels and a maximum width of 400 pixels. The minmax() function is used to ensure that the column will resize based on the content if it’s smaller than 300 pixels or larger than 400 pixels.
The 1fr value in the column template for the first and third columns means that they will take up an equal share of the remaining space in the grid container after the centre column has been sized.