Grid layout component for VueJS
Never heard of Atomic design till today.Read the blog and a few chapters of the book. Nothing really new, just another analogy (re-branding) for the standard modular design methods.

To your code. 

Its not at all DRY but the various settings are consistent and can easily be changed so that you minimize the repeated code and literals.

The following example reduces the repeated code but without knowing more about how these properties change per client/instance I cant add add anything regarding the design methods.

css() {
    const rules = {
        columns: "grid-template-columns: ##SET##;",
        rows: "grid-template-rows: ##SET##;",
        areas: "grid-template-areas: \"##SET##\";",
        gap: "grid-gap: ##SET##;",
        columnGap: "grid-column-gap: ##SET##;",
        rowGap: "grid-row-gap: ##SET##;",
    };
    const sizes = {
        default:" .grid { ##STYLE## }",
        small: "@media (max-width: 600px) { .grid { ##STYLE## } } ",
        medium: "@media (min-width: 600px) and (max-width: 992px) { .grid { ##STYLE## } } ",
    };
    var src, css = "";
    const rule = name =&gt; src[name] ? rules[name].replace("##SET##", src[name]) : "";
    for (const size of Object.keys(sizes)) {
        src = size === "default" : this : this[size];
        if (src) {
            css += sizes[size].replace("##STYLE##", Object.keys(rules).map(rule).join(""));
        }
    }
    return css;
}