Grid Settings

The $grid-settings map allows you to specify project-wide settings that effect many of Cask's defaults including the number of columns, the width of your gutters, and maximum site width.

$grid-settings: (
	  gutter: 1.25rem,
    row-width: 80rem,
    text-direction: ltr,
    total-columns: 12
  );

Settings

`gutter`

The gutter is the space between the columns of the grid. The default value for this setting is 1.25rem. Cask supports any unit of measure for gutter values. 10px, 1.2rem, 4%, and even 2vw` are all valid inputs! Rems are preferred.

`row-width`

The row-width is the maximum width for the Grid Row.

`text-direction`

The text-direction is a global setting that assigns the text direction for the project. The default for this property is ltr. This property will cause all grid objects to float left. If you are working on a project that supports ltr and rtl languages, this setting can be used to reverse the order of grid objects on the page.

`total-columns`

The total-columns defines the number of total columns in the grid. This serves as the default value whenever the grid-column() is called.

Defining your own settings

To change your grid settings, you can use the following. Because of the way the project settings are called, you can update one or all of the settings as needed.

$grid-settings: (
  gutter: 24px,
  row-width: 1280px
);

📘
Sass maps are a way of storing complex information in variables. They are an easy and powerful way of storing complex information. Learn more