webentwicklung-frage-antwort-db.com.de

Doppelgrenzen im CSS-Raster verhindern

Wie kann ich angesichts des aktuellen CSS-Raster-Beispiels die Grenzen reduzieren, um die doppelten Grenzen zu vermeiden?

Dies ist so einfach, wenn Sie eine HTML-Tabelle verwenden. Wie mache ich das mit display: grid?

.wrapper {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border: 1px solid black;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

htmlcsscss3css-grid
11
klugjo

Sie können das so machen:

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

body {
 background:pink;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Eine andere Idee ist, sich auf den Verlauf zu verlassen, um Lücken wie folgt zu füllen:

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-gap:1px;
  background:
    linear-gradient(#000,#000) center/100% 1px no-repeat,
    repeating-linear-gradient(to right,
        transparent ,transparent 50px,
        #000 50px,#000 51px);
  border:1px solid;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
}

body {
 background:pink;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

9
Temani Afif

Verwenden Sie anstelle eines tatsächlichen Rahmens um Gitterelemente die Hintergrundfarbe des Containers (für "Randfarbe") und die grid-gap-Eigenschaft (für "Randbreite").

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border: 1px solid black;
  grid-gap: 1px;
  background-color: black;
}

.wrapper > div {
  background-color: white;
  padding: 15px;
  text-align: center;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

17
Michael_B

.wrapper {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border: 1px solid black;
  margin:0 -1px -1px 0;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

margin:0 -1px -1px 0;

Das sollte den Trick tun.

7
Krzysztof Mazur

Etwas, das ich mit Erfolg verwendet habe, ist das Hinzufügen eines Feldschattens zu den Gitterelementen zusammen mit einer Spalten- und Zeilenlücke. Auf diese Weise kann die Spaltengröße immer genau so festgelegt werden, wie in grid-template-columns..__ festgelegt. Wenn Sie einfach die Spalten- und Zeilenlücke und die Schattengröße des Felds ändern, wird der Rand dicker. 

.wrapper {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
}
.wrapper > div {
  padding: 15px;
  text-align: center;
  box-shadow: 0 0 0 1px;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

1
dan richardson

Der Win-Win-Code wäre zu setzen

  • gitterelemente: Rand unten und Rand rechts
  • gitterumschlag: Rand oben und Rand links

Es würde also korrigieren, auch wenn die oberen Spalten nicht den unteren Spalten entsprechen

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
0
okater

Ich habe mit der outline-Eigenschaft eine Lösung gefunden.

.grid {
	width: 100%;
	height: 700px;
	display: grid;
	grid-template-columns: repeat(4, 25fr);
	grid-template-rows: repeat(4, 25fr);
	margin-bottom: 30px;
}

.grid-item {
	background-color: silver;
	outline: 1px solid gray; /* The outline creates the border */
	text-align: center;
	position: relative;
	z-index: 1; /* original z-index */
}

/* If you want to change the color on the hover state */
.grid-item:hover {
	outline: 1px solid red;
	z-index: 2; /* You must apply a z-index bigger than the original z-index or else some parts of the outline will be behind other grid elements */
}
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Der einzige Nachteil, den ich gefunden habe, ist, dass das letzte Element des Gitters die Überlagerung der Konturen klar macht. Dies geschieht jedoch nur, wenn die Elemente das Raster nicht vollständig ausfüllen.

0
Leonardo Baptista Lopes