width
this is the text for the message
Getting Started
by @Octavector
Welcome to Ingrid, a tool to help you quickly created responsive layouts using CSS Grid. Let's jump right in:
TIP: You can hide this Getting Started guide by clicking the Close
button in the top right corner of this window, you can reopen the guide by clicking the Getting Started
button at the top of the Control Panel
Press Delete or Backspace to delete an element.
Hold Spacebar to view the Information Panel which shows you a list of user created elements and their recorded media querys.
Hold Control to select a grid cell beneath an existed element.
The large number in the top right of your screen is the device width. If you change your browser window width the number will reflect this in multiples of 100.
Hide
button to hide the Control Panel if it's getting in the way of your grid designgrid-template-columns
, grid-template-rows
, grid-gap
and Max Page Width
fields. Enter 4 for grid-template-columns, 6 for grid-template-rows, 10 for grid-gap and 1200 for Max Page Width.Apply
. This wil create a grid based on your entered specifications for a device width of 700 pixels or wider. Try resizing the browser window to see the effects when you go below and beyond 700.Apply
. Now our grid reacts to the change in device width and gains an additional 2 columns when it reaches 900 pixels or wider.
Following on from the steps above:
grid-column-start
, grid-column-end
, grid-row-start
and grid-row-end
fields are updated with the correct cell and row information. class
field: Add / Update Element
button. The element appears on the grid: Just as we did for the grid, we can resize our browser window and make alterations to our element to make it respond.
As we resize the browser window from 800 to 900, notice that the element we created maintains its grid position, keeping the same coordinates while the grid shifts between a 4 and 6 column grid. Let's assign it an entirely new position for width 900.
Add / Update Element
button.Because the class
field was populated with the class name matching an existing element it updated that element (for the current screen width) instead of creating a new element.
TIP: Press and hold the Spacebar to view the Information Panel which shows you a list of user created elements, their class names and their recorded media querys.
resize the browser window between widths 800 and 900 to see that both the grid and the element respond.
When you're happy with your layout design, click the Generate
button to download the HTML file containing your generated grid work.