Everything You Need to Know to Use CSS Grid Like a Pro

Everything you need to know to use CSS Grid like a pro. All the CSS Grid tools you need to create basic and advanced website layouts in responsive ways that look great on all devices. CSS Grid Handbook - Complete guide to Grid Containers and Grid Items

CSS Grid gives you the tools to create basic and advanced website layouts in responsive ways that look great on mobile, tablet, and desktop devices.

This tutorial discusses everything you need to know to use CSS Grid like a pro.

Table of Contents

1. What Is CSS Grid?
2. Grid Container vs. Grid Item: What's the Difference?
3. What Is a grid Value in CSS?
4. What Is an inline-grid Value in CSS?
5. Properties for Specifying a Grid's Layout
6. What Are the Grid Container's Properties?
7. What Is CSS Grid's grid-template-columns Property?
8. What Is CSS Grid's grid-template-rows Property?
9. What Is CSS Grid's justify-content Property?
10. What Is CSS Grid's justify-items Property?
11. What Is CSS Grid's align-content Property?
12. What Is CSS Grid's align-items Property?
13. What Are the Grid Item's Properties?
14. What Is CSS Grid's justify-self Property?
15. What Is CSS Grid's align-self Property?
16. What Is CSS Grid's grid-column-start Property?
17. What Is CSS Grid's grid-column-end Property?
18. What Is CSS Grid's grid-column Property?
19. What Is CSS Grid's grid-row-start Property?
20. What Is CSS Grid's grid-row-end Property?
21. What Is CSS Grid's grid-row Property?
22. What Is CSS Grid's grid-area Property?
23. What Is CSS Grid's grid-template-areas Property?
24. How to Use the CSS minmax() function to Define Minimum and Maximum Grid Sizes
25. How to Use the CSS repeat() Function to Define Grid Tracks with Repeated Patterns
26. Overview

So, without any further ado, let's understand what CSS Grid is.

---

What is CSS Grid?

The CSS Grid Layout Module makes browsers display the selected HTML elements as grid box models.

Grid allows you to easily resize and reposition a grid container and its items two-dimensionally.

Note:

• "Two-dimensionally" means grid modules allow simultaneous laying out of box models in rows and columns.
• Use Flexbox if you only need to resize and reposition elements one-dimensionally.

Grid Container vs. Grid Item: What's the Difference?

A grid container is an HTML element whose display property's value is grid or inline-grid.

A grid item is any of the direct children of a grid container.

A grid container (the large yellow area in the image) is an HTML element whose display property's value is grid or inline-grid. Grid items (the smaller boxes within the yellow container) are the direct children of a grid container.

What Is a grid Value in CSS?

grid tells browsers to display the selected HTML element as a block-level grid box model.

In other words, setting an element's display property's value to grid turns the box model into a block-level grid layout module.

Here's an example:

section {
  display: grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid value to convert the HTML document's <section> elements from regular <section> nodes to block-level grid box models.

Note:

• The display: grid directive creates only a single-column grid container. Therefore, the grid items will display in the normal layout flow (one item below another).
• Converting a node to a grid box model makes the element's direct children become grid items.
• The display: grid directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Let's now discuss the inline-grid value.

What Is an inline-grid Value in CSS?

inline-grid tells browsers to display the selected HTML element as an inline-level grid box model.

In other words, setting an element's display property's value to inline-grid turns the box model into an inline-level grid layout module.

Here's an example:

section {
  display: inline-grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the inline-grid value to convert the HTML document's <section> elements from regular <section> nodes to inline-level grid box models.

Note:

• Converting a node to a grid box model makes the element's direct children become grid items.
• The display: inline-grid directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Properties for Specifying a Grid's Layout

On converting a regular HTML element to a grid (or inline-grid) box model, the grid layout module provides two categories of properties for positioning the grid box and its direct children:

• Grid container's properties
• Grid item's properties

What Are the Grid Container's Properties?

A grid container's properties specify how browsers should layout items within the grid box model.

Note: We define a grid container's property on the container, not its items.

The eight (8) types of grid container properties are:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows
• justify-content
• justify-items
• align-content
• align-items

Let's discuss the eight types now.

What Is CSS Grid's grid-template-columns Property?

grid-template-columns specifies the number and widths of columns browsers should display in the selected grid container.

Example 1: How to create a two-column grid container

section {
  display: grid;
  grid-template-columns: 95px 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display two columns of different widths in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second column relative to the fraction of available space in the grid container.

Example 2: How to create a three-column grid container

section {
  display: grid;
  grid-template-columns: 15% 60% 25%;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display three columns of different widths in the selected <section> grid container.

Note:

• You can use the grid-auto-columns property to specify default column widths for all the grid container's columns. For instance, grid-auto-columns: 150px will set default widths of 150px for all columns. But a grid-template-columns declaration will override it.
• Explicit grid columns are the columns you explicitly define with the grid-template-columns property.
• Implicit grid columns are the columns browsers create automatically. We use the grid-auto-columns properties to specify track sizes for implicit columns.

Tip:

• Use the CSS repeat() function to specify grid-template-columns values with repeated patterns. We will discuss the repeat() function later in this tutorial.
• Use the CSS column-gap property to create gaps between grid columns.

What Is CSS Grid's grid-template-rows Property?

grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

Example 1: How to create a three-row grid container

section {
  display: grid;
  grid-template-rows: 95px 1fr 70px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three rows of different heights in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second row relative to the fraction of available space in the grid container.

Example 2: How to create a three-row and four-column grid container

section {
  display: grid;
  grid-template-rows: 90px 300px 1fr;
  grid-template-columns: auto auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three columns of different heights in the selected <section> grid container.

Note:

• You can use the grid-auto-rows property to specify default row heights for all the grid container's rows. For instance, grid-auto-rows: 100px will set default heights of 100px for all rows. But a grid-template-rows declaration will override it.
• Explicit grid rows are the rows you explicitly define with the grid-template-rows property.
• Implicit grid rows are the rows browsers create automatically. We use the grid-auto-rows properties to specify track sizes for implicit rows.

Tip:

• Use the CSS repeat() function to specify grid-template-rows values with repeated patterns. We will discuss the repeat() function later in this tutorial.
• Use the CSS row-gap property to create gaps between grid rows.

What Is CSS Grid's justify-content Property?

justify-content specifies how browsers should position a grid container's columns along its row axis.

Note:

• A row axis is sometimes called an inline axis.
• The justify-content property works if the total column widths are less than the grid container's width. In other words, you need free space along the container's row axis to justify its columns left or right.

The justify-content property accepts the following values:

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

Let's discuss these values.

What is justify-content: start in CSS Grid?

start positions the grid container's columns with its row-start edge.

justify-content's start value positions columns to the grid container's row-start edge

Here's an example:

section {
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the start value to position the <section>'s columns to the grid container's row-start edge.

What is justify-content: center in CSS Grid?

center positions the grid container's columns to the center of the grid's row axis.

justify-content's center value positions columns to the center of the grid container

Here's an example:

section {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the center value to position the <section>'s columns to the center of the grid container.

What is justify-content: end in CSS Grid?

end positions a grid container's columns with its row-end edge.

justify-content's end value positions columns to the grid container's row-end edge

Here's an example:

section {
  display: grid;
  justify-content: end;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the end value to position the <section>'s columns to the grid container's row-end edge.

What is justify-content: space-between in CSS Grid?

space-between does the following:

• It positions a grid container's first column with its row-start edge.
• It positions the container's last column with the row-end edge.
• It creates even spacing between each pair of columns between the first and last columns.

justify-content's space-between value creates even spacing between each pair of columns between the first and last grid column

Here's an example:

section {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of columns between the first and last grid column.

What is justify-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's columns.

Therefore, the space before the first column and after the last one is half the width of the space between each pair of columns.

justify-content's space-around value assigns equal spacing to each side of the grid container's columns

Here's an example:

section {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's columns.

What is justify-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its columns.

justify-content's space-evenly value assigns even spacing to both ends of the grid container and between its columns

Here's an example:

section {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its columns.

What Is CSS Grid's justify-items Property?

justify-items specifies the default justify-self value for all the grid items.

The justify-items property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values.

What is justify-items: stretch in CSS Grid?

stretch is justify-items' default value. It stretches the grid container's items to fill their individual cells' row (inline) axis.

justify-items' stretch value stretches grid items to fill their individual cells' row axis

Here's an example:

section {
  display: grid;
  justify-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the grid items to fill their individual cells' row axis.

What is justify-items: start in CSS Grid?

start positions a grid container's items with the row-start edge of their individual cells' row axis.

justify-items' start value positions grid items to their individual cells' row-start edge

Here's an example:

section {
  display: grid;
  justify-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the start value to position the grid items to their individual cells' row-start edge.

What is justify-items: center in CSS Grid?

center positions a grid container's items to the center of their individual cells' row axis.

justify-items' center value positions grid items to their individual cells' center

Here's an example:

section {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the center value to position the grid items to the center of their individual cells' row axis.

What is justify-items: end in CSS Grid?

end positions a grid container's items with the row-end edge of their individual cells' row axis.

justify-items' end value positions grid items to their individual cells' row-end edge

Here's an example:

section {
  display: grid;
  justify-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the end value to position the grid items to their individual cells' row-end edge.

What Is CSS Grid's align-content Property?

align-content specifies how browsers should align a grid container's rows along the container's column axis.

Note:

• A column axis is sometimes called a block axis.
• The align-content property works if the total row heights are less than the grid container's height. In other words, you need free space along the container's column axis to align its rows up or down.

The align-content property accepts the following values:

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

Let's discuss these values.

What is align-content: start in CSS Grid?

start aligns a grid container's rows with the column-start edge of the grid's column axis.

align-content's start value aligns rows to the grid container's column-start edge

Here's an example:

section {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the start value to align the <section>'s rows to the grid container's column-start edge.

What is align-content: center in CSS Grid?

center aligns a grid container's rows to the center of the grid's column axis.

align-content's center value aligns rows to the center of the grid container

section {
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the center value to align the <section>'s rows to the center of the grid container.

What is align-content: end in CSS Grid?

end aligns a grid container's rows with the column-end edge of the grid's column axis.

align-content's end value aligns rows to the grid container's column-end edge

Here's an example:

section {
  display: grid;
  align-content: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the end value to align the <section>'s rows to the grid container's column-end edge.

What is align-content: space-between in CSS Grid?

space-between does the following:

• It aligns a grid container's first row with its column-start edge.
• It aligns the container's last row with the column-end edge.
• It creates even spacing between each pair of rows between the first and last row.

align-content's space-between value creates even spacing between each pair of rows between the first and last grid row

Here's an example:

section {
  display: grid;
  align-content: space-between;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of rows between the first and last grid row.

What is align-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's rows.

Therefore, the space before the first row and after the last one is half the width of the space between each pair of rows.

align-content's space-around value assigns equal spacing to each side of the grid container's rows

Here's an example:

section {
  display: grid;
  align-content: space-around;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's rows.

What is align-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its rows.

align-content's space-evenly value assigns even spacing to both ends of the grid container and between its rows

Here's an example:

section {
  display: grid;
  align-content: space-evenly;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its rows.

What Is CSS Grid's align-items Property?

align-items specifies the default align-self value for all the grid items.

The align-items property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values below.

What is align-items: stretch in CSS Grid?

stretch is the default value for align-items. It stretches the grid container's items to fill their individual cells' column (block) axis.

align-items' stretch value stretches grid items to fill their individual cells' column axis

Here's an example:

section {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the grid items to fill their individual cells' column axis.

What is align-items: start in CSS Grid?

start aligns a grid container's items with the column-start edge of their individual cells' column axis.

align-items' start value aligns grid items to their individual cells' column-start edge

Here's an example:

section {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the start value to align the grid items to their individual cells' column-start edge.

What is align-items: center in CSS Grid?

center aligns a grid container's items to the center of their individual cells' column axis.

align-items' center value aligns grid items to their individual cells' center

Here's an example:

section {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the center value to align the grid items to the center of their individual cells' column axis.

What is align-items: end in CSS Grid?

end aligns a grid container's items with the column-end edge of their individual cells' column axis.

align-items' end value aligns grid items to their individual cells' column-end edge

Here's an example:

section {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the end value to align the grid items to their individual cells' column-end edge.

So, now that we know the types of CSS grid container properties, we can discuss the grid item properties.

What Are the Grid Item's Properties?

A grid item's properties specify how browsers should layout a specified item within the grid box model.

Note: We define a grid item's property on the item, not its container.

The ten (10) types of grid item properties are:

• justify-self
• align-self
• grid-column-start
• grid-column-end
• grid-column
• grid-row-start
• grid-row-end
• grid-row
• grid-area
• grid-template-areas

Let's discuss the ten types now.

What Is CSS Grid's justify-self Property?

justify-self specifies how browsers should position the selected grid item along its cell's row (inline) axis.

The justify-self property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values.

What is justify-self: stretch in CSS Grid?

stretch is justify-self's default value. It stretches the selected grid item to fill its cell's row (inline) axis.

justify-self's stretch value stretches the selected grid item to fill its cell's row axis

Here's an example:

.grid-item1 {
  justify-self: stretch;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch grid-item1 to fill its cell's row axis.

What is justify-self: start in CSS Grid?

start positions the selected grid item with the row-start edge of its cell's row axis.

justify-self's start value positions the selected grid item to its cell's row-start edge

Here's an example:

.grid-item1 {
  justify-self: start;
}

Try it on StackBlitz

The snippet above used the start value to position grid-item1 to its cell's row-start edge.

What is justify-self: center in CSS Grid?

center positions the selected grid item to the center of its cell's row axis.

justify-self's center value positions the selected grid item to its cell's center

Here's an example:

.grid-item1 {
  justify-self: center;
}

Try it on StackBlitz

The snippet above used the center value to position grid-item1 to its cell's center.

What is justify-self: end in CSS Grid?

end positions the selected grid item with the row-end edge of its cell's row axis.

justify-self's end value positions the selected grid item to its cell's row-end edge

Here's an example:

.grid-item1 {
  justify-self: end;
}

Try it on StackBlitz

The snippet above used the end value to position grid-item1 to its cell's row-end edge.

What Is CSS Grid's align-self Property?

align-self specifies how browsers should align the selected grid item along its cell's column (block) axis.

The align-self property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values below.

What is align-self: stretch in CSS Grid?

stretch is align-self's default value. It stretches the selected grid item to fill its cell's column (block) axis.

align-self's stretch value stretches the selected grid item to fill its cell's column axis

Here's an example:

.grid-item1 {
  align-self: stretch;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch grid-item1 to fill its cell's column axis.

What is align-self: start in CSS Grid?

start aligns the selected grid item with the column-start edge of its cell's column axis.

align-self's start value aligns the selected grid item to its cell's column-start edge

Here's an example:

.grid-item1 {
  align-self: start;
}

Try it on StackBlitz

The snippet above used the start value to align grid-item1 to its cell's column-start edge.

What is align-self: center in CSS Grid?

center aligns the selected grid item to the center of its cell's column axis.

align-self's center value aligns the selected grid item to its cell's center

Here's an example:

.grid-item1 {
  align-self: center;
}

Try it on StackBlitz

The snippet above used the center value to align grid-item1 to its cell's center.

What is align-self: end in CSS Grid?

end aligns the selected grid item with the column-end edge of its cell's column axis.

align-self's end value aligns the selected grid item to its cell's column-end edge

Here's an example:

.grid-item1 {
  align-self: end;
}

Try it on StackBlitz

The snippet above used the end value to align grid-item1 to its cell's column-end edge.

What Is CSS Grid's grid-column-start Property?

grid-column-start specifies where the selected grid item should start (or span) along the grid container's row (inline) axis.

The grid-column-start property accepts the following values:

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to auto-start the selected grid item following the normal column flow

.grid-item1 {
  grid-column-start: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-start grid-item1 according to the normal column layout flow.

Example 2: How to start the selected grid item at column line 3

.grid-item1 {
  grid-column-start: 3;
}

Try it on StackBlitz

The snippet above used the grid-column-start property to start grid-item1 at column line 3.

Example 3: How to span the selected grid item across two columns

.grid-item1 {
  grid-column-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two columns.

What Is CSS Grid's grid-column-end Property?

grid-column-end specifies where the selected grid item should end (or span) along the grid container's row (inline) axis.

The grid-column-end property accepts the following values:

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to auto-end the selected grid item following the normal column flow

.grid-item1 {
  grid-column-end: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-end grid-item1 according to the normal layout flow.

Example 2: How to end the selected grid item at column line 3

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Try it on StackBlitz

The snippet above used the grid-column-end property to end grid-item1 at column line 3.

Example 3: How to span the selected grid item across two columns

.grid-item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two columns.

What Is CSS Grid's grid-column Property?

grid-column is a shorthand for the grid-column-start and grid-column-end properties.

In other words, instead of writing:

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

You can alternatively use the grid-column property to shorten your code like so:

.grid-item1 {
  grid-column: 1 / 3;
}

Here is grid-column's syntax:

grid-column: grid-column-start / grid-column-end;

What Is CSS Grid's grid-row-start Property?

grid-row-start specifies where the selected grid item should start (or span) along the grid container's column (block) axis.

The grid-row-start property accepts the following values:

• auto
• <row-line-number>
• span <number-of-rows>

Example 1: How to auto-start the selected grid item following the normal row flow

.grid-item1 {
  grid-row-start: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-start grid-item1 according to the normal row layout flow.

Example 2: How to start the selected grid item at row line 3

.grid-item1 {
  grid-row-start: 3;
}

Try it on StackBlitz

The snippet above used the grid-row-start property to start grid-item1 at row line 3.

Example 3: How to span the selected grid item across two rows

.grid-item1 {
  grid-row-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two rows.

What Is CSS Grid's grid-row-end Property?

grid-row-end specifies where the selected grid item should end (or span) along the grid container's column (block) axis.

The grid-row-end property accepts the following values:

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to auto-end the selected grid item following the normal row flow

.grid-item1 {
  grid-row-end: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-end grid-item1 according to the normal row layout flow.

Example 2: How to end the selected grid item at row line 5

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

Try it on StackBlitz

The snippet above used the grid-row-end property to end grid-item1 at row line 5.

Example 3: How to span the selected grid item across three rows

.grid-item1 {
  grid-row-end: span 3;
}

Try it on StackBlitz

The snippet above used the span 3 value to span grid-item1 across three rows.

What Is CSS Grid's grid-row Property?

grid-row is a shorthand for the grid-row-start and grid-row-end properties.

In other words, instead of writing:

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

You can alternatively use the grid-row property to shorten your code like so:

.grid-item1 {
  grid-row: 1 / 5;
}

Here is grid-row's syntax:

grid-row: grid-row-start / grid-row-end;

What Is CSS Grid's grid-area Property?

You can use the grid-area property for the following purposes:

1. As a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.
2. To specify a grid item's name.

Let's discuss the two purposes below.

How to use grid-area as a shorthand

Here is the syntax for using the grid-area property as a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties:

.your-grid-item {
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}

Therefore, instead of writing:

.grid-item1 {
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: span 2;
}

Try it on StackBlitz

You can alternatively use the grid-area property to shorten your code like so:

.grid-item1 {
  grid-area: 3 / 1 / 5 / span 2;
}

Try it on StackBlitz

How to use grid-area to specify a grid item's name

Here is the syntax for using the grid-area property to specify a grid item's name:

.your-grid-item {
  grid-area: item-name;
}

Here's an example:

.grid-item1 {
  grid-area: firstDiv;
}

.grid-item2 {
  grid-area: middleDiv;
}

.grid-item2 {
  grid-area: lastDiv;
}

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
</section>

Using grid-area to define a named grid item allows your grid container's grid-template-areas property to use the name to set the item's size and location.

What Is CSS Grid's grid-template-areas Property?

grid-template-areas specifies the area where you want to place named grid items within a grid container.

Remember: We use the CSS grid-area property to name grid items.

Example 1: How to place a named grid item across three columns

.grid-item1 {
  grid-area: firstDiv;
}

section {
  display: grid;
  grid-template-areas: "firstDiv firstDiv firstDiv . .";
  background-color: orange;
  margin: 50px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to place grid-item1 across the first three column areas.

Note the following:

• Quotation marks ("") define each grid row.
• A period symbol (.) defines an unnamed grid item.
• We used the whitespace character to separate grid columns.

Example 2: How to specify multiple named grid items' placements

.grid-item1 {
  grid-area: header;
}

.grid-item2 {
  grid-area: article;
}

.grid-item3 {
  grid-area: footer;
}

.grid-item4 {
  grid-area: sidebar;
}

.grid-item5 {
  grid-area: ads1;
}

.grid-item6 {
  grid-area: ads2;
}

.grid-item7 {
  grid-area: ads3;
}

section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "header header header header header"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads2"
    "sidebar article article article ads3"
    "sidebar footer footer footer footer";
  background-color: orange;
  margin: 30px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to specify where browsers should place the grid items across the rows and columns of the grid container.

Important Stuff to Know about the grid-template-areas Property

Here are four essential facts to remember when using the grid-template-areas property:

1. grid-template-areas do not permit empty cells

The grid-template-areas property requires you to provide an item for all grid cells.

For instance, consider this snippet:

grid-template-areas:
  "header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the first row is incomplete.

In other words, the first row is the only one with two columns. However, grid-template-areas expect all the rows in a grid container to have the same number of columns.

2. You can use dots to specify empty cells

Suppose you wish to leave some cells empty. In that case, use a dot (.) or multiple unspaced dots (....).

Here's an example:

grid-template-areas:
  "header header . . ."
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Try it on StackBlitz

The snippet above used the three spaced dot (.) symbols to indicate three empty cells.

3. grid-template-areas do not permit placing an item in multiple locations

The grid-template-areas property cannot place items twice within a grid container.

For instance, consider this snippet:

grid-template-areas:
  "header header header header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer header header header";

Above is an invalid grid-template-areas value because the header item occupies two grid areas.

4. grid-template-areas allows rectangular areas only

The grid-template-areas property cannot create non-rectangular areas (such as T-shaped or L-shaped).

For instance, consider this snippet:

grid-template-areas:
  "header header header header header"
  "sidebar ads1 ads1 ads1 ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the ads1 item creates a non-rectangular grid area.

So, now that we know the types of CSS grid item properties, we can discuss how to define minimum and maximum grid sizes.

How to Use the CSS minmax() function to Define Minimum and Maximum Grid Sizes

minmax() is a CSS Grid function for defining minimum and maximum grid sizes.

Syntax of the CSS minmax() function

minmax() accepts two arguments. Here is the syntax:

minmax(minimum-size, maximum-size)

Note the following:

• The minimum-size argument specifies the smallest size for a specific length.
• The maximum-size argument specifies the largest size for a specific length.
• minmax()'s arguments can be any of the non-negative CSS lengths, or any one of the keywords auto, min-content, or max-content.
• Suppose the maximum-size argument is less than the minimum-size. In that case, browsers will ignore the maximum-size and treat the minmax() function as min().
• An fr unit is an invalid unit for the minimum-size argument.

How to use the CSS minmax() function

You can use the minmax() function as a value for the following CSS properties:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

Examples of the CSS minmax() function

Below are examples of how the CSS minmax() function works.

How to define a 70px minimum and a 250px maximum row grid size

section {
  display: grid;
  grid-template-rows: 50px 100px minmax(70px, 250px);
  grid-template-columns: auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used the CSS minmax() function to set the <section>'s third row's height to a minimum of 70px and a maximum of 250px.

How to define a 30% minimum and a 70% maximum column grid size

section {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr minmax(30%, 70%) 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used the CSS minmax() function to set the <section>'s second column's width to a minimum of 30% and a maximum of 70%.

Note: You can use the CSS repeat() function to specify grid-template-rows or grid-template-columns values with repeated patterns. Let's discuss the repeat() function now.

How to Use the CSS repeat() Function to Define Grid Tracks with Repeated Patterns

The repeat() CSS function allows you to write more concise and readable values when specifying multiple grid tracks with repeated patterns.

Note:

• A track refers to a grid container's column (or row).
• You can use repeat() as a value for the CSS grid-template-columns or grid-template-rows properties.

Syntax of the CSS repeat() function

repeat() accepts two arguments. Here is the syntax:

repeat(number-of-repetition, track-list-to-repeat)

Argument 1: number-of-repetition

The number-of-repetition argument specifies the number of times browsers should repeat the specified track list (the second argument).

The number-of-repetition argument can be any of the following values:

• Number 1 or its multiple
• auto-fill
• auto-fit

auto-fill vs. auto-fit: What's the difference?

The auto-fill and auto-fit values automatically create as many tracks as needed to fill a grid container without causing an overflow.

The difference between the two values is that auto-fit collapses empty tracks to zero-pixel (0px). But auto-fill displays both empty and filled tracks.

Note: Empty tracks are columns or rows with no grid item.

Argument 2: track-list-to-repeat

The track-list-to-repeat argument specifies the track pattern you wish to repeat across a grid container's horizontal or vertical axis.

In other words, track-list-to-repeat consists of one or more values specifying the sizes of tracks browsers should repeat within a grid container.

Note: Suppose your number-of-repetition is auto-fill or auto-fit. In that case, you can use only fixed sizes as the track-list-to-repeat argument.

Examples of the CSS repeat() function

Below are examples of how the CSS repeat() function works.

How to create a three-column grid container with 70px column-widths

section {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create three 70px-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 70px 70px 70px;

How to create a four-column grid container with one 50px and three 90px column-widths

section {
  display: grid;
  grid-template-columns: 50px repeat(3, 90px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create three 90px-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 50px 90px 90px 90px;

How to create a five-column grid container with one 40px and two 60px 1fr column-widths

section {
  display: grid;
  grid-template-columns: 40px repeat(2, 60px 1fr);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create two 60px 1fr-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 40px 60px 1fr 60px 1fr;

Note: We used the fr (fraction) unit to scale the third and fifth columns relative to the fraction of available space in the grid container.

How to auto-fill the grid container with 70px-wide columns

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to automatically fill the grid container with 70px-wide columns.

How to auto-fill the grid container with a minimum of 50px and a maximum of 1fr wide columns

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fill the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

Note: 1fr means one fraction unit.

How to auto-fit the grid container with a minimum of 50px and a maximum of 1fr wide columns

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fit the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

Overview

In this article, we discussed all the CSS Grid tools you need to create basic and advanced website layouts in responsive ways that look great on all devices.

I hope you've found this article helpful.

Thanks for reading!

If you like this tutorial, you can get the guidebook version at Amazon. It is a handy quick reference guide to CSS Grid.

Source: https://www.freecodecamp.org

#css

What is GEEK

Buddha Community

Pdf2gerb: Perl Script Converts PDF Files to Gerber format

pdf2gerb

Perl script converts PDF files to Gerber format

Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.

The general workflow is as follows:

1. Design the PCB using your favorite CAD or drawing software.
2. Print the top and bottom copper and top silk screen layers to a PDF file.
3. Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
4. Use a Gerber viewer to double-check the output against the original PCB design.
5. Make adjustments as needed.
6. Submit the files to a PCB manufacturer.

Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).

See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.

---

pdf2gerb_cfg.pm

#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;

use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)


##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file

use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call

#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software.  \nGerber files MAY CONTAIN ERRORS.  Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG

use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC

use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)

#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1); 

#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
    .010, -.001,  #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
    .031, -.014,  #used for vias
    .041, -.020,  #smallest non-filled plated hole
    .051, -.025,
    .056, -.029,  #useful for IC pins
    .070, -.033,
    .075, -.040,  #heavier leads
#    .090, -.043,  #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
    .100, -.046,
    .115, -.052,
    .130, -.061,
    .140, -.067,
    .150, -.079,
    .175, -.088,
    .190, -.093,
    .200, -.100,
    .220, -.110,
    .160, -.125,  #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
    .090, -.040,  #want a .090 pad option, but use dummy hole size
    .065, -.040, #.065 x .065 rect pad
    .035, -.040, #.035 x .065 rect pad
#traces:
    .001,  #too thin for real traces; use only for board outlines
    .006,  #minimum real trace width; mainly used for text
    .008,  #mainly used for mid-sized text, not traces
    .010,  #minimum recommended trace width for low-current signals
    .012,
    .015,  #moderate low-voltage current
    .020,  #heavier trace for power, ground (even if a lighter one is adequate)
    .025,
    .030,  #heavy-current traces; be careful with these ones!
    .040,
    .050,
    .060,
    .080,
    .100,
    .120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);

#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size:   parsed PDF diameter:      error:
#  .014                .016                +.002
#  .020                .02267              +.00267
#  .025                .026                +.001
#  .029                .03167              +.00267
#  .033                .036                +.003
#  .040                .04267              +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
    HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
    RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
    SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
    RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
    TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
    REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};

#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
    CIRCLE_ADJUST_MINX => 0,
    CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
    CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
    CIRCLE_ADJUST_MAXY => 0,
    SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
    WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
    RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};

#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches

#line join/cap styles:
use constant
{
    CAP_NONE => 0, #butt (none); line is exact length
    CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
    CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
    CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
    
#number of elements in each shape type:
use constant
{
    RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
    LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
    CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
    CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
    rect => RECT_SHAPELEN,
    line => LINE_SHAPELEN,
    curve => CURVE_SHAPELEN,
    circle => CIRCLE_SHAPELEN,
);

#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions

# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?

#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes. 
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes

#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches

# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)

# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time

# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const

use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool

my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time

print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load


#############################################################################################
#junk/experiment:

#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html

#my $caller = "pdf2gerb::";

#sub cfg
#{
#    my $proto = shift;
#    my $class = ref($proto) || $proto;
#    my $settings =
#    {
#        $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
#    };
#    bless($settings, $class);
#    return $settings;
#}

#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;

#print STDERR "read cfg file\n";

#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names

#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }

---

Download Details:

Author: swannman
Source Code: https://github.com/swannman/pdf2gerb

License: GPL-3.0 license

#perl 

13 Cool Simple CSS Grid layout examples

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

• Styling the last row of a grid with CSS selectors
• Grid Animation Effects
• Simple grid mixin
• Simple Grid CSS Grid
• Simple CSS Grid Hover
• Simple css Grid – Responsive
• Simple css grid system using scss
• CSS variables simple CSS grid
• Super Simple CSS Grid
• 3D Grid UI
• Aspect ratio Grid boxes with CSS Variables
• Simple grid system
• Simple Grid template

#layouts #css grid #grid #layouts #css #css grid layout

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

How to start an electric scooter facility/fleet in a university campus/IT park

Are you leading an organization that has a large campus, e.g., a large university? You are probably thinking of introducing an electric scooter/bicycle fleet on the campus, and why wouldn’t you?

Introducing micro-mobility in your campus with the help of such a fleet would help the people on the campus significantly. People would save money since they don’t need to use a car for a short distance. Your campus will see a drastic reduction in congestion, moreover, its carbon footprint will reduce.

Micro-mobility is relatively new though and you would need help. You would need to select an appropriate fleet of vehicles. The people on your campus would need to find electric scooters or electric bikes for commuting, and you need to provide a solution for this.

To be more specific, you need a short-term electric bike rental app. With such an app, you will be able to easily offer micro-mobility to the people on the campus. We at Devathon have built Autorent exactly for this.

What does Autorent do and how can it help you? How does it enable you to introduce micro-mobility on your campus? We explain these in this article, however, we will touch upon a few basics first.

Micro-mobility: What it is

You are probably thinking about micro-mobility relatively recently, aren’t you? A few relevant insights about it could help you to better appreciate its importance.

Micro-mobility is a new trend in transportation, and it uses vehicles that are considerably smaller than cars. Electric scooters (e-scooters) and electric bikes (e-bikes) are the most popular forms of micro-mobility, however, there are also e-unicycles and e-skateboards.

You might have already seen e-scooters, which are kick scooters that come with a motor. Thanks to its motor, an e-scooter can achieve a speed of up to 20 km/h. On the other hand, e-bikes are popular in China and Japan, and they come with a motor, and you can reach a speed of 40 km/h.

You obviously can’t use these vehicles for very long commutes, however, what if you need to travel a short distance? Even if you have a reasonable public transport facility in the city, it might not cover the route you need to take. Take the example of a large university campus. Such a campus is often at a considerable distance from the central business district of the city where it’s located. While public transport facilities may serve the central business district, they wouldn’t serve this large campus. Currently, many people drive their cars even for short distances.

As you know, that brings its own set of challenges. Vehicular traffic adds significantly to pollution, moreover, finding a parking spot can be hard in crowded urban districts.

Well, you can reduce your carbon footprint if you use an electric car. However, electric cars are still new, and many countries are still building the necessary infrastructure for them. Your large campus might not have the necessary infrastructure for them either. Presently, electric cars don’t represent a viable option in most geographies.

As a result, you need to buy and maintain a car even if your commute is short. In addition to dealing with parking problems, you need to spend significantly on your car.

All of these factors have combined to make people sit up and think seriously about cars. Many people are now seriously considering whether a car is really the best option even if they have to commute only a short distance.

This is where micro-mobility enters the picture. When you commute a short distance regularly, e-scooters or e-bikes are viable options. You limit your carbon footprints and you cut costs!

Businesses have seen this shift in thinking, and e-scooter companies like Lime and Bird have entered this field in a big way. They let you rent e-scooters by the minute. On the other hand, start-ups like Jump and Lyft have entered the e-bike market.

Think of your campus now! The people there might need to travel short distances within the campus, and e-scooters can really help them.

How micro-mobility can benefit you

What advantages can you get from micro-mobility? Let’s take a deeper look into this question.

Micro-mobility can offer several advantages to the people on your campus, e.g.:

• Affordability: Shared e-scooters are cheaper than other mass transportation options. Remember that the people on your campus will use them on a shared basis, and they will pay for their short commutes only. Well, depending on your operating model, you might even let them use shared e-scooters or e-bikes for free!
• Convenience: Users don’t need to worry about finding parking spots for shared e-scooters since these are small. They can easily travel from point A to point B on your campus with the help of these e-scooters.
• Environmentally sustainable: Shared e-scooters reduce the carbon footprint, moreover, they decongest the roads. Statistics from the pilot programs in cities like Portland and Denver showimpressive gains around this key aspect.
• Safety: This one’s obvious, isn’t it? When people on your campus use small e-scooters or e-bikes instead of cars, the problem of overspeeding will disappear. you will see fewer accidents.

#android app #autorent #ios app #mobile app development #app like bird #app like bounce #app like lime #autorent #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime

Best Electric Bikes and Scooters for Rental Business or Campus Facility

The electric scooter revolution has caught on super-fast taking many cities across the globe by storm. eScooters, a renovated version of old-school scooters now turned into electric vehicles are an environmentally friendly solution to current on-demand commute problems. They work on engines, like cars, enabling short traveling distances without hassle. The result is that these groundbreaking electric machines can now provide faster transport for less — cheaper than Uber and faster than Metro.

Since they are durable, fast, easy to operate and maintain, and are more convenient to park compared to four-wheelers, the eScooters trend has and continues to spike interest as a promising growth area. Several companies and universities are increasingly setting up shop to provide eScooter services realizing a would-be profitable business model and a ready customer base that is university students or residents in need of faster and cheap travel going about their business in school, town, and other surrounding areas.

Electric Scooters Trends and Statistics

In many countries including the U.S., Canada, Mexico, U.K., Germany, France, China, Japan, India, Brazil and Mexico and more, a growing number of eScooter users both locals and tourists can now be seen effortlessly passing lines of drivers stuck in the endless and unmoving traffic.

A recent report by McKinsey revealed that the E-Scooter industry will be worth― $200 billion to $300 billion in the United States, $100 billion to $150 billion in Europe, and $30 billion to $50 billion in China in 2030. The e-Scooter revenue model will also spike and is projected to rise by more than 20% amounting to approximately $5 billion.

And, with a necessity to move people away from high carbon prints, traffic and congestion issues brought about by car-centric transport systems in cities, more and more city planners are developing more bike/scooter lanes and adopting zero-emission plans. This is the force behind the booming electric scooter market and the numbers will only go higher and higher.

Companies that have taken advantage of the growing eScooter trend develop an appthat allows them to provide efficient eScooter services. Such an app enables them to be able to locate bike pick-up and drop points through fully integrated google maps.

List of Best Electric Bikes for Rental Business or Campus Facility 2020:

It’s clear that e scooters will increasingly become more common and the e-scooter business model will continue to grab the attention of manufacturers, investors, entrepreneurs. All this should go ahead with a quest to know what are some of the best electric bikes in the market especially for anyone who would want to get started in the electric bikes/scooters rental business.

We have done a comprehensive list of the best electric bikes! Each bike has been reviewed in depth and includes a full list of specs and a photo.

Billy eBike

 https://www.kickstarter.com/projects/enkicycles/billy-were-redefining-joyrides

To start us off is the Billy eBike, a powerful go-anywhere urban electric bike that’s specially designed to offer an exciting ride like no other whether you want to ride to the grocery store, cafe, work or school. The Billy eBike comes in 4 color options – Billy Blue, Polished aluminium, Artic white, and Stealth black.

Price: $2490

Available countries

Available in the USA, Europe, Asia, South Africa and Australia.This item ships from the USA. Buyers are therefore responsible for any taxes and/or customs duties incurred once it arrives in your country.

Features

• Control – Ride with confidence with our ultra-wide BMX bars and a hyper-responsive twist throttle.
• Stealth- Ride like a ninja with our Gates carbon drive that’s as smooth as butter and maintenance-free.
• Drive – Ride further with our high torque fat bike motor, giving a better climbing performance.
• Accelerate – Ride quicker with our 20-inch lightweight cutout rims for improved acceleration.
• Customize – Ride your own way with 5 levels of power control. Each level determines power and speed.
• Flickable – Ride harder with our BMX /MotoX inspired geometry and lightweight aluminum package

Specifications

• Maximum speed: 20 mph (32 km/h)
• Range per charge: 41 miles (66 km)
• Maximum Power: 500W
• Motor type: Fat Bike Motor: Bafang RM G060.500.DC
• Load capacity: 300lbs (136kg)
• Battery type: 13.6Ah Samsung lithium-ion,
• Battery capacity: On/off-bike charging available
• Weight: w/o batt. 48.5lbs (22kg), w/ batt. 54lbs (24.5kg)
• Front Suspension: Fully adjustable air shock, preload/compression damping /lockout
• Rear Suspension: spring, preload adjustment
• Built-in GPS

Why Should You Buy This?

• Riding fun and excitement
• Better climbing ability and faster acceleration.
• Ride with confidence
• Billy folds for convenient storage and transportation.
• Shorty levers connect to disc brakes ensuring you stop on a dime
• belt drives are maintenance-free and clean (no oil or lubrication needed)

**Who Should Ride Billy? **

Both new and experienced riders

**Where to Buy? **Local distributors or ships from the USA.

Genze 200 series e-Bike

 https://www.genze.com/fleet/

Featuring a sleek and lightweight aluminum frame design, the 200-Series ebike takes your riding experience to greater heights. Available in both black and white this ebike comes with a connected app, which allows you to plan activities, map distances and routes while also allowing connections with fellow riders.

Price: $2099.00

Available countries

The Genze 200 series e-Bike is available at GenZe retail locations across the U.S or online via GenZe.com website. Customers from outside the US can ship the product while incurring the relevant charges.

Features

• 2 Frame Options
• 2 Sizes
• Integrated/Removable Battery
• Throttle and Pedal Assist Ride Modes
• Integrated LCD Display
• Connected App
• 24 month warranty
• GPS navigation
• Bluetooth connectivity

Specifications

• Maximum speed: 20 mph with throttle
• Range per charge: 15-18 miles w/ throttle and 30-50 miles w/ pedal assist
• Charging time: 3.5 hours
• Motor type: Brushless Rear Hub Motor
• Gears: Microshift Thumb Shifter
• Battery type: Removable Samsung 36V, 9.6AH Li-Ion battery pack
• Battery capacity: 36V and 350 Wh
• Weight: 46 pounds
• Derailleur: 8-speed Shimano
• Brakes: Dual classic
• Wheels: 26 x 20 inches
• Frame: 16, and 18 inches
• Operating Mode: Analog mode 5 levels of Pedal Assist Thrott­le Mode

Norco from eBikestore

 https://ebikestore.com/shop/norco-vlt-s2/

The Norco VLT S2 is a front suspension e-Bike with solid components alongside the reliable Bosch Performance Line Power systems that offer precise pedal assistance during any riding situation.

Price: $2,699.00

Available countries

This item is available via the various Norco bikes international distributors.

Features

• VLT aluminum frame- for stiffness and wheel security.
• Bosch e-bike system – for their reliability and performance.
• E-bike components – for added durability.
• Hydraulic disc brakes – offer riders more stopping power for safety and control at higher speeds.
• Practical design features – to add convenience and versatility.

Specifications

• Maximum speed: KMC X9 9spd
• Motor type: Bosch Active Line
• Gears: Shimano Altus RD-M2000, SGS, 9 Speed
• Battery type: Power Pack 400
• Battery capacity: 396Wh
• Suspension: SR Suntour suspension fork
• Frame: Norco VLT, Aluminum, 12x142mm TA Dropouts

Bodo EV

http://www.bodoevs.com/bodoev/products_show.asp?product_id=13

Manufactured by Bodo Vehicle Group Limited, the Bodo EV is specially designed for strong power and extraordinary long service to facilitate super amazing rides. The Bodo Vehicle Company is a striking top in electric vehicles brand field in China and across the globe. Their Bodo EV will no doubt provide your riders with high-level riding satisfaction owing to its high-quality design, strength, breaking stability and speed.

Price: $799

Available countries

This item ships from China with buyers bearing the shipping costs and other variables prior to delivery.

Features

• Reliable
• Environment friendly
• Comfortable riding
• Fashionable
• Economical
• Durable – long service life
• Braking stability
• LED lighting technology

Specifications

• Maximum speed: 45km/h
• Range per charge: 50km per person
• Charging time: 8 hours
• Maximum Power: 3000W
• Motor type: Brushless DC Motor
• Load capacity: 100kg
• Battery type: Lead-acid battery
• Battery capacity: 60V 20AH
• Weight: w/o battery 47kg

#android app #autorent #entrepreneurship #ios app #minimum viable product (mvp) #mobile app development #news #app like bird #app like bounce #app like lime #autorent #best electric bikes 2020 #best electric bikes for rental business #best electric kick scooters 2020 #best electric kickscooters for rental business #best electric scooters 2020 #best electric scooters for rental business #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime