Для вывода элементов массива в сетке в обратном порядке (снизу вверх и справа налево) на веб-странице с помощью цикла for на JavaScript можно использовать следующий код:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Grid</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
}
.item {
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="grid" id="grid"></div>
<script>
const array = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
const grid = document.getElementById('grid');
for (let i = array.length - 1; i >= 0; i--) {
const item = document.createElement('div');
item.classList.add('item');
item.textContent = array[i];
grid.appendChild(item);
}
</script>
</body>
</html>
```
Чтобы изменить направление вывода элементов из массива на сетку grid таким образом, чтобы начинать с правой нижней ячейки и двигаться вверх, проходя справа налево и снизу вверх, можно применить стили grid и написать код JavaScript, который будет заполнять ячейки сетки в нужном порядке. Вот пример кода:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Grid</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
}
.item {
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="grid" id="grid"></div>
<script>
const array = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
const grid = document.getElementById('grid');
let row = 2;
let column = 2;
for (let i = 0; i < array.length; i++) {
const item = document.createElement('div');
item.classList.add('item');
item.textContent = array[i];
grid.appendChild(item);
grid.style.gridTemplateColumns = `repeat(${column + 1}, 100px)`;
grid.style.gridTemplateRows = `repeat(${row + 1}, 100px)`;
grid.style.gridTemplateAreas = `
". . ."
". . ."
". . ."
`;
grid.childNodes[i].style.gridArea = `${row + 1} / ${column + 1}`;
if (row === 0) {
column--;
row = 2;
} else {
row--;
}
}
</script>
</body>
</html>
```
В этом примере кода элементы массива выводятся на веб-странице в сетке grid начиная с правой нижней ячейки и двигаясь вверх, проходя справа налево и снизу вверх одновременно.