Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Delve into CSS Grids and Flexboxes

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Delve into CSS Grids and Flexboxes


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

Creating layouts using CSS is one of the most fundamental skills a web developer must possess. A well-designed layout is the backbone of any successful website, as it improves user experience, visual appeal, and overall usability. There are two ways you can create a webpage layout using CSS, either with grids or the flexbox. Let's start with the traditional method and discuss how to create a grid layout.

๐Ÿ“ง Subscribe to my newsletter: https://ericsdevblog.ck.page/profile

Creating grids

A grid layout consists of a grid container and several grid items. The grid container must have its display property set to grid or inline-grid. grid creates a block-level grid container, and inline-grid creates an inline-level grid container.

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
.container {
  display: grid;
}

All direct children of this container will automatically become grid items.

Grid columns and rows

You can then specify how many columns you wish to create using the grid-template-columns property. The property accepts any number of values. The number of values determines the number of columns, and the value itself determines the size of that column. For example:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
}

.item {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: x-large;
  text-align: center;
  padding: 20px;
  border: 1px solid orange;
  background-color: bisque;
}

grid with two columns

I also added some styles for the grid items to make the grid look more pleasing, but it is not necessary here, so I will omit them in future examples.

.container {
  display: grid;
  grid-template-columns: 100px 200px 50px;
}

grid with three columns

If you want all columns to have equal size, simply set the values to auto.

grid with auto columns

Similarly, you can specify row sizes using the grid-template-rows property.

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 100px 150px;
}

grid with different row heights

However, this property does not determine the number of rows in the grid. If you specify extra values, they will be ignored.

Lastly, grid-template is a shorthand property for grid-template-columns and grid-template-rows with the following syntax:

grid-template: <row> <row> ... / <col> <col> ...;
.container {
  display: grid;
  grid-template: 100px 150px / auto auto auto;
}

grid template

Grid gaps

When designing a webpage, it is good to leave some space between elements so that they are not too close to each other. By using the grid layout, you can easily add equal spacing between all grid items instead of micromanaging each margin. For example:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 10px;
  column-gap: 20px;
}

gaps

Alternatively, you may use the shorthand property, gap:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px 20px;
}

If you want equal spacing for column gaps and row gaps, specify a single value:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

gaps with equal spacing

Grid items

It is also possible for you to customize individual grid items using CSS. In a real-life scenario, it is common for one grid item to take up multiple columns or rows. For example, you can define an item to span across multiple columns by specifying a start point (grid-column-start) and an end point (grid-column-end).

<div class="container">
    <div class="item-2col">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

.item {
  . . .
}

.item-2col {
  grid-column-start: 1;
  grid-column-end: 3;
}

grid item two columns

Keep in mind that the numbers refer to the column lines, not columns, as shown in the chart below.

column lines and row lines

So, for an item to span across two columns, it should start from 1 and end with 3.

You can also use the shorthand property grid-column to achieve the same result:

.item-2col {
  grid-column: 1 / 3;
}

Similarly, you can define a grid item to span across multiple rows using the grid-row-start and grid-row-end properties, or the grid-row shorthand.

.item-2row {
  grid-row-start: 1;
  grid-row-end: 3;
}
.item-2row {
  grid-row: 1 / 3;
}

grid row

If an item needs to span across multiple rows and columns, you can use the grid-area property instead, which is a shorthand for grid-row and grid-column. It has the following syntax:

grid-area: <row_start> / <col_start> / <row_end> / <col_end>
.item-area {
  grid-area: 1 / 1 / 3 / 3;
}

grid area

Grid alignment

Just like aligning individual elements in a webpage, when aligning items in a grid, we also have to talk about horizontal and vertical directions. However, things are a bit more complex than that. There are six different alignment properties, as shown in the list below:

  • align-content
  • align-items
  • align-self
  • justify-content
  • justify-items
  • justify-self

Vertical alignment

Let's discuss each of them one by one. First of all, the align properties control vertical alignment. As an example, this is a grid with six items, and the grid container is 300px high:

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  height: 300px;
}

The align-content property is used to specify the alignment of rows when there is available space in the container. Common values include:

  • start
  .container {
    align-content: start;
  }

align content start

  • end
  .container {
    align-content: end;
  }

align content end

  • center
  .container {
    align-content: center;
  }

align content center

  • space-between
  .container {
    align-content: space-between;
  }

align content space between

  • space-around
  .container {
    align-content: space-around;
  }

align content space around

  • space-evenly
  .container {
    align-content: space-evenly;
  }

align content space evenly

  • stretch
  .container {
    align-content: stretch;
  }

align content stretch

align-items, on the other hand, is used to align individual grid items within their respective grid cells along the block axis. This is especially useful when grid items have different heights. Common values include:

  • start
  .container {
    align-items: start;
  }

align items start

  • end
  .container {
    align-items: end;
  }

align items end

  • center
  .container {
    align-items: center;
  }

align items center

  • stretch
  .container {
    align-items: stretch;
  }

align items stretch

  • baseline
  .container {
    align-items: baseline;
  }

align items baseline

Lastly, the align-self property works just like align-items, except it is used on individual grid cells, not the container. It will overwrite the alignment rule set by align-items.

.container {
  align-items: start;
}

.item-sm {
  align-self: end;
}

align self

Horizontal alignment

The horizontal alignment, controlled by the justify properties, works in a similar way. First, the justify-content property defines how grid items are distributed horizontally along the main axis. Some common values are:

  • start
  .container {
    justify-content: start;
  }

justify content start

  • end
  .container {
    justify-content: end;
  }

justify content end

  • center
  .container {
    justify-content: center;
  }

justify content center

  • space-between
  .container {
    justify-content: space-between;
  }

justify content between

  • space-around
  .container {
    justify-content: space-around;
  }

justify content around

  • space-evenly
  .container {
    justify-content: space-evenly;
  }

justify content evenly

The justify-items controls how grid items are aligned horizontally within their cells. Some common values are:

  • start
  .container {
    justify-items: start;
  }

justify items start

  • end
  .container {
    justify-items: end;
  }

justify items end

  • center
  .container {
    justify-items: center;
  }

justify items center

  • stretch
  .container {
    justify-items: stretch;
  }

justify items stretch

Similarly, the justify-self property is used on individual grid items to overwrite the default alignment rule set by justify-items.

.container {
  justify-items: start;
}

.item-sm {
  justify-self: end;
}

justify self

Flexbox layout

The flexbox is another layout model in CSS that provides an efficient way to design and structure complex layouts, but with a more flexible approach. It is particularly suited for creating one-dimensional layouts, either in a row or a column, as we will see later.

Just like a grid layout, a flexbox layout also consists of a flex container and several flex items. The container should have its display property set to flex, and all its direct children automatically become flex items.

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
.container {
  display: flex;
  gap: 10px;
}

With a flex layout, instead of rows and columns, you must define a flex-direction and a flex-wrap. The flex-direction specifies in which direction the container should stack its flex items. The accepted values are:

  • column
  .container {
    flex-direction: column;
  }

flex direction column

  • column-reverse
  .container {
    flex-direction: column-reverse;
  }

flex direction column reverse

  • row
  .container {
    flex-direction: row;
  }

flex direction row

  • row-reverse
  .container {
    flex-direction: row-reverse;
  }

flex direction row reverse

The flex-wrap property determines whether the flex items should wrap (automatically change to the following line when there is insufficient space).

  • wrap
  .container {
    flex-wrap: wrap;
  }

flex wrap

  • nowrap
  .container {
    flex-wrap: nowrap;
  }

flex nowrap

  • wrap-reverse
  .container {
    flex-wrap: wrap-reverse;
  }

flex wrap reverse

The flex-flow is a shorthand for flex-direction and flex-wrap properties.

.container {
  flex-flow: column wrap;
}

flex flow

Lastly, the alignment properties for the grid layout we discussed before also work for flexbox layouts. For example:

.container {
  flex-direction: row;
  flex-wrap: wrap;

  align-content: center;
  justify-content: center;
}

flex alignment

Next steps

In this article, we explored gird and flexbox, two primary methods you can use to create webpage layouts. In the next article, we will discuss how to use the knowledge we've learned so far to create layouts that work for different screen sizes. This design principle is referred to as responsive design.

If you are interested, here are some of my other articles about CSS and frontend design:

...



๐Ÿ“Œ Delve into CSS Grids and Flexboxes


๐Ÿ“ˆ 105.69 Punkte

๐Ÿ“Œ Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build


๐Ÿ“ˆ 36.86 Punkte

๐Ÿ“Œ Delve deeper into Android development with our new course!


๐Ÿ“ˆ 33.77 Punkte

๐Ÿ“Œ Delve into the hidden corners of security at CyberThreat18


๐Ÿ“ˆ 33.77 Punkte

๐Ÿ“Œ Delve into the worldโ€™s largest AI language model | INT178A


๐Ÿ“ˆ 33.77 Punkte

๐Ÿ“Œ MRI Scans Delve Into Dog-Like Complexity of Squid Brains


๐Ÿ“ˆ 33.77 Punkte

๐Ÿ“Œ CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


๐Ÿ“ˆ 32.29 Punkte

๐Ÿ“Œ Webseiten-Layout mit CSS-Grids


๐Ÿ“ˆ 30.75 Punkte

๐Ÿ“Œ How to Develop Fluid Grids with CSS Frameworks


๐Ÿ“ˆ 30.75 Punkte

๐Ÿ“Œ Responsive CSS Layout Grids without Media Queries


๐Ÿ“ˆ 30.75 Punkte

๐Ÿ“Œ Delve Risk and ThreatNG Security join forces to boost client decisions through advanced intelligence


๐Ÿ“ˆ 29.2 Punkte

๐Ÿ“Œ Secureworks acquires vulnerability management platform Delve


๐Ÿ“ˆ 27.29 Punkte

๐Ÿ“Œ Microsoft Finally Releases Office Delve for Windows Phones


๐Ÿ“ˆ 27.29 Punkte

๐Ÿ“Œ Microsoft Finally Releases Office Delve for Windows Phones


๐Ÿ“ˆ 27.29 Punkte

๐Ÿ“Œ Delve Labsโ€™ free data feed lists new vulnerabilities most likely to be exploitable


๐Ÿ“ˆ 27.29 Punkte

๐Ÿ“Œ Secureworks to Acquire Vulnerability Management Startup Delve Laboratories


๐Ÿ“ˆ 27.29 Punkte

๐Ÿ“Œ An Ultimate Guide On Sizing, Spacing, Grids And Layout In Web And UI/UX Design


๐Ÿ“ˆ 24.44 Punkte

๐Ÿ“Œ Power grids of Los Angeles and Salt Lake under Cyber Attack


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ Power grids of Los Angeles and Salt Lake under Cyber Attack


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ Stable Diffusion - Better Grids and Bulk Scripts


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ Lights on or off? Cyber security and resilience of power grids make the difference


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ Airlines navigation systems and electric grids are vulnerable to GPS Y2K bug


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ Hackers behind dangerous oil and gas intrusions are probing US power grids


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ HD-PLC Alliance to create the IEEE P1901b standard for using HD-PLC in smart grids and factories


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ Israel, Cyprus and Greece Agree To Link Power Grids Via Subsea Cable


๐Ÿ“ˆ 22.53 Punkte

๐Ÿ“Œ New in Chrome 65: CSS Paint API, Server Timing API, and CSS display: contents


๐Ÿ“ˆ 22.16 Punkte

๐Ÿ“Œ Post-Modern CSS (In-Depth on CSS Grid, Flexbox and Other New Properties)


๐Ÿ“ˆ 22.16 Punkte

๐Ÿ“Œ Build a Tic Tac Toe Game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti


๐Ÿ“ˆ 22.16 Punkte

๐Ÿ“Œ CSS tutorial series: CSS Units and Sizing


๐Ÿ“ˆ 22.16 Punkte

๐Ÿ“Œ Complete Website using HTML And CSS | CSSย Project


๐Ÿ“ˆ 22.16 Punkte

๐Ÿ“Œ Creating an animated text gradient with Tailwind CSS (and vanilla CSS)


๐Ÿ“ˆ 22.16 Punkte

๐Ÿ“Œ Why Tailwind CSS is still better than StyleX and other CSS libraries


๐Ÿ“ˆ 22.16 Punkte

๐Ÿ“Œ Sugar.css is futuristic and minimalistic CSS framework


๐Ÿ“ˆ 22.16 Punkte











matomo