Creado: The First Grid CSS WordPress Theme Arrived [Exclusive Interview with Victor Salva]

Are you a hater of damned layout restrictions? Good news for you. Your prayers have finally been answered. A much-talked-about technology, CSS Grid, has found its way to the marketplace of TemplateMonster. We are one of the FIRST web design companies that have released a theme based on CSS Grid. Dubbed Creado, our revolutionary CSS Grid WordPress theme gives a lot of freedom in laying out the content in a creative way.

View Demo | More Info

Today, we are going to discuss this revolutionary technology and Creado with Victor Salva. Not the famous movie director who gave us a fright with Jeepers Creepers, but the talented developer who gave thrills to many TemplateMonster customers with his top-quality WordPress themes.

TemplateMonster: Hello, Victor! Tell us what the CSS Grid Layout specification is all about, please.

Victor Salva: Hey, dude. Grid CSS is a new way to arrange the content on the page without using tables, floats, flexboxes, and other things we got used to. What I mean is that you can create grids in CSS, not HTML.
CSS Grid Layout allows transformations in the visual layout structure, which requires no corresponding markup changes. As a designer, you can change the way page elements are located at different breakpoints of the layout. There’s no need to compromise a sensibly structured document for your responsive design.

The grid adapts to the available space with ease. As each element has its own area on the grid, they don’t overlap each other on smaller screens. But if you want, you can also make one item overlap another. That’s what HTML table-based layouts can’t do.

TemplateMonster: Are you saying that CSS Grid layouts adjustable to mobile devices?

Victor Salva: Exactly! Whether you use a retina display or a smartphone, you’ll enjoy the same user-friendly experience.

TemplateMonster: How did you come up with the idea to use the specification? What determined your choice?

Victor Salva: Trends influence our choices. Grid is the best thing that has happened to CSS over the last few years. What proves it is the fact that this specification was implemented in all the major browsers almost simultaneously, i.e. Firefox in early March, Chrome in about a week after Firefox, and Safari a bit later.

Before March, there had been no support for this specification at all. But since March, support has grown by more than 60%. In other words, 60% of web users can see the content on pages built with Grid CSS.

No other specifications were adopted at the same time like this one. Traditionally, a specification gets implemented in a browser on the basis of prefixes and undergoes testing. Only after that, prefixes are eliminated. To compare, full adoption of Flexbox took a much longer period of time. Learn more here.

TemplateMonster: What is the main advantage of CSS Grid over other specifications?

Victor Salva: CSS Grid gives more freedom to developers and makes it much easier for them to lay out the content. For example, overlapping is more convenient with CSS Grid than with the position Absolute and its analogs.

To compare, here’s a three-column listing with 20px between columns in Grid CSS and Flexbox.

Flexbox

.parent {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
.child {
flex: 1 0 33.333%;
max-width: 33.333%;
padding-left: 10px;
padding-right: 10px;
}

Grid CSS

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

TemplateMonster: Seems cool. What about pitfalls? Will users face any problems with layouts based on Grid CSS?

Victor Salva: Unless they use IE or Edge browsers and update them regularly, there’ll be no problems.

TemplateMonster: Wait a second. What if my grandma living in a village cut off from the civilization tries to enter my Grid CSS-based site using IE?

Victor Salva: She may not see such a cool version of the interface as Firefox users, but your site will still work well, without any glitches. There’ll be just a standard grid, that’s all. With Grid CSS, you won’t lose people coming to your site from IE or Edge. No reasons to panic.

TemplateMonster: That’s relieving. What makes Creado different from other WordPress themes?

Victor Salva: Layouts for multiple purposes. This CSS Grid WordPress theme comes with pre-designed layouts for a blog listing and various widgets. They include a slideshow, Instagram, custom posts on the homepage, and related posts on the single post page. Here they are.

Blog Listing Grid CSS Layout

Slider Grid CSS Layout

Custom Posts Grid CSS Layout

Instagram Grid CSS Layout

Related Posts Grid CSS Layout

TemplateMonster: As a rule, TemplateMonster’s WordPress themes bulge at the seams due to a large amount of features in their packages. Did you stick to this tradition when developing Creado?

Victor Salva: Of course! Who can break such a rock-solid tradition? That would be inhuman. This CSS Grid WordPress theme offers all the innovative features our customers can’t live without. For example, we equipped it with a much-loved live customizer allowing them to edit its default design without constant page reloading. There are also 7 header layouts, 5 blog layouts, 500+ Google fonts, multiple custom widgets, docs, and much more. Customers of TemplateMonster will never have a deficit of features. Just punch me in the eye if I’m lying. LOL

TemplateMonster: I don’t need that sacrifice for now. Instead, lift the veil and tell us about the plans you have for the future?

Victor Salva: I personally would love to try CSS variables, but there’s one but. Since neither IE nor Edge support it, my initiative is impossible for now.

TemplateMonster: Dear representatives of IE and Edge! If you’re reading this, I am begging you to support CSS variables and make Victor’s day. Hope that helps. What about the plans you can implement without my begging?

Victor Salva: CSS Grid is expected to become a new standard in web development. Of course, we can’t ignore this fact, that’s why we are going to introduce CSS Grid to all our themes. I’m sure it will happen quite soon, so stay tuned!

TemplateMonster: Thank you, Victor, for talking with us today.

Victor Salva: My pleasure.

Would you like to ask Victor any questions about Creado and CSS Grid? The comments section is all yours. Victor will answer all your questions with pleasure. Le the chat begin. Also, check out the live demo of Creado to see its creative potential in action.

View Demo | More Info