How To Use Css Layout Templates

Top 5 CSS Filigree Layout Generators

Recommended visual CSS grid layout generators in 2021

Modern web applications are responsive. Though many CSS libraries and frameworks support Grid systems, using pure CSS grids is also becoming a trend. So, if you know the correct tools, you lot can arrive a whole lot easier to generate the grid layouts from scratch.

And so, in this article, I will introduce the five all-time CSS layout generators with feature comparisons to help yous generate CSS grids visually.

i. Griddy

https://griddy.io/

Griddy is one of the most used CSS filigree generators amongst designers and developers.

With Griddy, you can create 2nd layouts hands by only configuring rows, columns, gaps, and alignments.

The following case shows a CSS course generated using Griddy with 2 columns, 3 rows which are justified and aligned to the center.

How Griddy works

                .container {                  
                  display: grid;                  
                  grid-template-columns: 100px 100px;                  
                  grid-template-rows: 100px 100px;                  
                  grid-column-gap: 20px                  
                  filigree-row-gap: 20px                  
                  justify-items: center                  
                  marshal-items: middle                  
}              

Features of Griddy

• Allows resizing columns and rows using pixels (px), fractionals (fr), and percentages (%).
• You lot can use multiple units to resize in a single grid.
• Yous can test different alignment and justifying options.

ii. Layoutit

https://layoutit.com/

Layoutit is an open-source, interactive CSS Grid generator.

The functionality of Layoutit is nearly similar to Griddy. But it updates the HTML and CSS code in real-time when you make the changes to the filigree.

The following example shows the HTML and CSS codes of a simple grid generated using Layoutit.

How Layoutit works

                <div class="container">
                  <div ></div>
                  <div ></div>
</div>                .container {
                  display: filigree;
                  grid-template-columns: 10fr;
                  grid-template-rows: 10fr;
                  filigree-auto-columns: 10fr;
                  filigree-auto-rows: 10fr;
                  gap: 50px 50px;
                  grid-automobile-menstruum: row;
                  justify-items: center;
                  align-items: center;
                  grid-template-areas:
                  ".";
}              

Features of Layoutit

• You tin either commencement from scratch or get-go with one of the base templates.
• You simply drag & drib the elements inside the column where you want to identify them.
• Allows resizing columns and rows using pixels (px), fractionals (fr), and percentages (%).
• Supports grid placement options in the UI.

3. CSS Grid Layout Generator

https://css-grid-layout-generator.pw/

CSS Filigree Layout provides a variety of settings to configure for both grid container and filigree items. Another specialty of this generator is that it gives you the output code in 3 different formats: general CSS, JSX, and styled-components.

                // Output as HTML and CSS Grade                .container {
                  display: filigree;
                  grid-template-columns: 1fr 1fr;
                  grid-template-rows: 1fr 1fr;
                  filigree-gap: 1em 1em;
}                .item-2 {
                  grid-area: 1 / two / 2 / ii;
}                .item-3 {
                  grid-area: ii / 1 / ii / 2;
}                // Output every bit styled-component                import styled from 'styled-components'                const Container = styled.div`
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  grid-template-rows: 1fr 1fr;
                  filigree-gap: 1em 1em;
`                const Item2 = styled.div`
                  filigree-expanse: one / ii / 2 / 2;
`                const Item3 = styled.div`
                  filigree-area: ii / 1 / 2 / 2;
`              

Features of CSS Grid Layout Generator

• Tin configure container and item setting separately.
• Provides a big variety of resizing options compared to other CSS generators. Yous can resize rows and columns using fr, px, em, rem, vw, vh, %, min-content, max-content , minmax() ,repeat(), auto-fit and automobile-fill up .
• Can easily align content using justify-items, align-items, justify-content and align-content options.
• Output lawmaking can exist generated as CSS classes, CSS modules to support JSX, and styled-components.

4. CSS Filigree Generator

With CSS Grid Generator, all yous demand to practise is give the number of rows, columns, and gaps betwixt rows and columns. Then, with a single button click, information technology volition provide a CSS class similar below:

                .parent {
                  display: grid;
                  filigree-template-columns: repeat(5, 1fr);
                  grid-template-rows: repeat(5, 1fr);
                  filigree-column-gap: 1px;
                  grid-row-gap: 1px;
}              

How CSS Grid Generator Works

Features of CSS Grid Generator

• Provides a simple interface and generates layouts within seconds.
• Allows placing dives within boxes by dragging.

CSS Grid Generator is an open-source project hosted in Netlify and you can also contribute to it past visiting their GitHub repository.

5. cssgr.id

https://cssgr.id/

cssgr.id is i of the most simple CSS grid generators you could ever discover.

CSS Filigree Generator is an open-source project hosted in Netlify, and you can likewise contribute to it by visiting their GitHub repository.

Features of cssgr.id

• Provides v starter layouts to cull from as 3x3, football formation, header -footer, gallery, and generic website.
• You can add placeholder text and see how your layout looks with text.
• Information technology can be easily configured by calculation the number of items, columns, and gaps.
• Provides both HTML and CSS classes as the output.

The following code shows an example of v items aligned to gallery formation.

                // HTML                <div class="grid">
                  <div grade="span-col-three span-row-two">Item ane</div>
                  <div>Item 2</div>
                  <div form="span-row-ii">Item 3</div>
                  <div form="bridge-row-iii">Detail iv</div>
                  <div>Item five</div>
</div>                // CSS Classes                .grid {
                  display: filigree;
                  grid-template-columns: repeat(six, 1fr);
                  grid-gap: 10px;
}
.span-col-3{grid-column: span 3 / auto;}
.span-row-ii{grid-row: bridge ii / machine;}
                  
.bridge-row-3{grid-row: span three / car;}
                              

Conclusion

CSS grid generators are a handy tool for developers to generate simple CSS layouts within a few minutes. Apart from what I discussed here, there are many like tools, and you should choose based on your requirements.

For instance, tools like CSS Grid Generator and cssgr.id do not provide options for alignments. But they are very straightforward to utilise.

I hope my suggestions volition help yous choose the all-time CSS grid generator for your project. And don't forget to share your thoughts after working with these libraries.

Thank you for Reading!!!

Build better Component Libs and Design Systems

Share components across teams and projects to speed up development and make certain your users experience a consistent pattern at every touchpoint.

OSS Tools like Bit offer a great dev feel for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a endeavor →

An independently source-controlled and shared "card" component. On the right => its dependency graph, machine-generated by Bit.

Larn More

Source: https://blog.bitsrc.io/top-5-css-grid-layout-generators-f7743f0dfad2

Posted by: sykeseasked.blogspot.com

Share this post