Adds dividers between specified .content-l_col-X-X classes.

Layout dividers work in conjunction with .content-l_col-X-X elements and have specific needs depending on which column element variant they are attached to. For example, .content-l_col-1-2 has different divider needs than .content-l_col-1-3 because they may break to single columns at different breakpoints.

Dividers use absolute positioning relative to the .content-l element and depend on .content-l using position: relative;. This allows vertical dividers to span the height of the tallest column. Just be aware that if you have more than one row of columns, and each row has columns of different widths, the borders will cause unwanted overlapping since they will span the height of the entire .content-l element.

cf-grid columns use left and right border for fixed margin which means it’s not possible to set visual left and right borders directly on them. Instead we can use the :before pseudo element and position it absolutely. The added benefit of doing it this way is that the border spans the entire height of the next parent using position: relative;. This means that the border will always match the height of the tallest column in the row.

.my-column-1-2 {

    // Creates a column that spans 6 out of 12 columns.
    .grid_column(6, 12);

    // Add a top divider only at screen 599px and smaller.
    .respond-to-max(599px {
        .grid_column__top-divider();
    });

    // Add a left divider only at screen 600px and larger.
    .respond-to-min(600px, {
        .grid_column__left-divider();
    });

}